Membuat Popular Post di Blogspot Lebih Ramping

Popular Post atau sering ditulis oleh blogger Indonesia dengan sebutan Tulisan Terpopuler pada dasarnya punya banyak fungsi. Selain berguna untuk menaikan trafik pageview pada blog kita, dengan memasang widget ini, juga akan mempercantik tampilan.

Memasang widget Popular Post secara baik dan unik tentu akan menarik perhatian pengunjung untuk mengklik dan menambah waktu kunjungannya ke blog kita, sehigga bounce rate blog akan semakin kecil, dengan begitu nilai kita akan bertambah dimata search enggine maupun Alexa.

Hanya saja, widget bawaan blogger ini memiliki struktur tampilan yang kurang sedap. Apalagi dengan pengaturan yang rumit jika hendak merubahnya. Hal ini sukses membuat banyak blogger mengurungkan niatnya untuk memasang widget ini di blognya.

Tapi tak usah khawatir, kali ini bloGoooblok ~ akan membahas pemecahan masalah ini dengan mudah. Merubah dan Membuat Popular Post di Blogspot Lebih Ramping tak mesti harus berurusan dengan pengaturan di mode HTML, kita bisa merubahnya tanpa harus pusing dengan susunan script.

Ini contoh tampilan Popular Post yang akan kita buat.
Namun sebelum membuatnya, Anda harus mengaktifkan dulu widget popular post ini di dasboard Anda. Caranya :
  • Masuk ke Tata Letak, lalu pilih Tambahkan Widget dan cari Entri Populer. 
  • Setalah itu centang  thumbnail gambar, lalu Simpan. 

Jika telah aktif, kita masuk ke Cara Membuat Popular Post di Blogspot Lebih Ramping, ikuti cara-caranya berikut ini :
  • Pertama-tama copy script CSS dibawah ini. 
/* Popular Post Widget by bloGoooblok ~ 
----------------------------------------------------------------- */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 11px/1.4 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
  color:#666666;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 10%;
  width:35px;
  height:35px;
  float:left;
}

.PopularPosts ul li {
  background-color:#f3f3f3;
  margin:1% .5em -5% 0;
  padding:.5em 1.5em .5em .5em;
   position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

  • Lalu login ke akun blogspot Anda. Pada tab disebelah kiri klik Template lalu Sesuaikan.
  • Pada tampilan pengaturan pilih Tingkat Lanjut, lalu Tambahkan CSS. Paste script CSS yang diatas kedalam kotak yang disediakan. Jika Anda telah banyak menambah script CSS, paste dibagian paling bawah saja.


Keterangan :

    • Anda bisa merubah ukuran dan jarak tampilan. Silahkan mengubah script sesuai keinginan. Salah satu contoh script yang bisa Anda rubah adalah background-color:#f3f3f3; pada bagian .PopularPosts ul li {. Rubahlah warga #f3f3f3 dengan yang Anda inginkan, jika ingin tampilannya putih saja ganti dengan kata white atau #fffff.
  • Jika telah selesai dengan tampilan yang diinginkan silahkan klik Terapkan ke blog.
Kini tampilan Tulisan Terpopuler Anda akan berubah dari yang jaraknya jarang-jarang menjadi sedikit lebih hemat space. Gimana mudah bukan!. Jika masih memiliki pertanyaan, silahkan didiskusikan pada kolom komentar, kami akan dengan senang hati membantu.