Modifikasi Popular Post Sederhana Tanpa Thumbnails

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 ....