Membuat Popular Post Dengan Angka Atau Nomor Urut

Widget popular post merupakan widget yang menampilkan artikel yang menjadi tranding view di blog yang kita miliki dalam kurun waktu tertentu, popular post sedikit banyaknya dapat memberikan peningkatan view pada post yang sering dikunjungi pembaca blog kita.

Namun terkadang kita merasa tampilan popular post standar yang ada pada blog yang kita miliki membuat orang enggan untuk melirik popular post yang ada pada blog kita, nah bagaimana jika kita melakukan sedikit memberikan sentuhan modifikasi pada popular post yang kita miliki.

Popular post yang coba saya modifikasi berikut, akan mengacu pada desain popular post seperti yang dimiliki oleh situs kompas.com, bagaimana hasilnya mari kita coba.

Untuk langkah pertama ya jelas kita perlu menambahkan widget popular post untuk itu langsung saja menuju halaman Tata Letak, Tambahkan Widget kemudian pilih Entri Populer, lalu atur sesuai gambar dibawah ini.

 

Lanjut pada langkah berikutnya, edit HTML template dan langsung saja cari kode tag ini ]]></b:skin> kemudian letakan kode CSS dibawah tepat diatasnya.

 

#PopularPosts1 ul{list-style-type:none;margin:10px 0 0;padding:0 2px;width:280px}
#PopularPosts1 ul li{border:0;margin:0;padding:10px;position:relative;list-style:none;min-height:35px}
#PopularPosts1 ul li img{border:0;margin:0 5px 0 0;float:left;height:30px}
#PopularPosts1 ul li:first-child{background:#f5f5f5}
#PopularPosts1 ul li:first-child+li{background:#f8f8ff}
#PopularPosts1 ul li:first-child+li+li{background:#f5f5f5}
#PopularPosts1 ul li:first-child+li+li+li{background:#f8f8ff}
#PopularPosts1 ul li:first-child+li+li+li+li{background:#f5f5f5}
#PopularPosts1 ul li:first-child+li+li+li+li+li{background:#f8f8ff}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#f5f5f5}
#PopularPosts1 ul li a{color:#222;font-size:14px;text-decoration:none;font-style:italic;list-style:none}
#PopularPosts1 ul li a:hover{text-decoration:underline}

Setelah terpasang, save dan lihat hasil popular post yang sudah kita modifikasi tersebut, selamat mencoba jika ketemu kendala silahkan berkomentar untuk bertanya.