Ditulis oleh: Ditulis pada: 1/31/2014
Sebenarnya dasar dari modifikasi popular post ini adalah dari modifikasi popular post warna warni yang sudah banyak bertebaran di Google. Saya sendiri kurang tahu asal script-nya dari mana, namun yang jelas dengan ini kita bisa menentukan background berbeda untuk tiap item popular post-nya. Di sini saya menggunakan popular post tanpa thumbnail dan snippets, dan juga tidak menggunakan penomoran seperti pada popular post warna-warni kebanyakan.
Dengan begitu kode CSS-nya menjadi lebih sedikit dan lebih simple. Di sini saya hanya menggunakan warna dominan abu-abu, namun sebenarnya Anda bisa memberikan warna-warna cerah lainnya untuk setiap item-nya. Screenshot-nya tampak pada gambar di bawah ini.
Untuk membuatnya tentunya Anda harus menambahkan widget popular post dahulu melalui Tata Letak >> Add a gadget >> Pilih Popular Post dan hilangkan tanda centang pada thumbnails dan snippets serta tentukan jumlahnya 10 item.
Kemudian silahkan copy kode CSS di bawah ini dan simpan di atas kode
]]></b:skin> atau </stytle>
.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;}
.PopularPosts .widget-content ul li a:hover{color:#20c1ea;}
Jika Anda ingin merubah background pada tiap itemnya, silahkan ganti background pada kode
.PopularPosts .widget-content ul li:nth-child(1) - (10)
Jika Popular Post ini tidak rata kiri dengan widget lainnya, silahkan tambahkan margin-left minus, misalnya seperti ini
margin-left:-5px dan tambahkan pada kode .PopularPosts .widget-content ul
Kemudian jangan lupa untuk menghapus kode
<b:include name='quickedit'/> untuk mengurangi error pada validasi HTML5.
Kemudian untuk menambahkan title tag pada link popular post-nya silahkan Jump To Widget dan pilih
PopularPosts1 dan temukan kode seperti di bawah ini:
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
Kemudian ganti dengan kode di bawah ini:
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
Selesai dan selamat mencoba ....