Cara Membuat Simple Popular Post di Blog

Popular post ini merupakan widget penting bagi saya atau sebagian besar para Blogger, karena widget ini memberitahukan pengunjung blog kita, apa yang sedang menjadi trending topic atau postingan yang paling sering dikunjungi setiap harinya.

Banyak sekali cara untuk membuat widget popular post pada blog. Namun tidak semuanya sesuai dengan selera kita, atau mungkin dampak dari widget popular post yang menggunakan berbagai efek dari widget popular post tersebut (misalnya saja, efek popular post yang bisa bergerak), bisa membuat loading blog kita menjadi semakin lama. 

Akhirnya saya menemukan cara membuat widget popular post yang sederhana dan tidak memberatkan loading blog, namun tetap keren jika dilihat :D

Saya menemukan cara ini dari blognya Mas Kompi Ajaib dan saya tertarik untuk mencobanya, dan ternyata widget popular post ini sangat ringan pada blog.

Cara memasangnya sangatlah mudah.

Pada pengaturan widget popular post di blog anda, pastikan thumbnail dan cuplikan-nya tidak anda centang. Seperti gambar di bawah ini.

 

Kemudian tambahkan script dibawah ini diatas ]]></b:skin> atau </style>

.PopularPosts .item-snippet{font-size: 11px; margin-top:10px;color:#555 }
.PopularPosts .widget-content ul{margin-top:-7px;padding:7px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;width:100%;margin-bottom:1px}
.PopularPosts .widget-content ul li:nth-child(1){background:#444}
.PopularPosts .widget-content ul li:nth-child(2){background:#555}
.PopularPosts .widget-content ul li:nth-child(3){background:#666}
.PopularPosts .widget-content ul li:nth-child(4){background:#777}
.PopularPosts .widget-content ul li:nth-child(5){background:#888}
.PopularPosts .widget-content ul li:nth-child(6){background:#999}
.PopularPosts .widget-content ul li:nth-child(7){background:#aaa}
.PopularPosts .widget-content ul li:nth-child(8){background:#bbb}
.PopularPosts .widget-content ul li:nth-child(9){background:#c1c1c1}
.PopularPosts .widget-content ul li:nth-child(10){background:#ccc}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none; transition:all .3s ease-in-out;}
.PopularPosts .widget-content ul li a:hover{color:#03C7FD;}

Kemudian klik simpan.

Anda juga bisa mengedit warnanya sendiri sesuai dengan warna yang anda inginkan.

Jika setelah di cek tapi widget popular postnya masih sama saja atau tidak berubah, mungkin sudah ada script lain yang sudah ada. Jika itu terjadi anda harus menghapus script yang sudah ada tersebut dengan cara 

Cari scriptnya biasanya seperti ini .PopularPosts (gunakan CTRL+F untuk memudahkan pencarian)
Lalu hapus scriptnya dan ganti dengan script yang diatas. Dan klik simpan.