Modifikasi Popular Post Sederhana Tanpa Thumbnails

Sebenarnya dasar dari modifikasi popular post ini ialah dari modifikasi popular post warna warni yang sudah banyak bertebaran di Google. Saya sendiri kurang tahu asal script-nya dari mana, namun yang terang dengan ini kita dapat memilih background berbeda untuk tiap item popular post-nya. Di sini aku memakai popular post tanpa thumbnail dan snippets, dan juga tidak memakai penomoran ibarat pada popular post warna-warni kebanyakan.

Dengan begitu instruksi CSS-nya menjadi lebih sedikit dan lebih simple. Di sini aku hanya memakai warna secara umum dikuasai abu-abu, namun sebetulnya Anda dapat memperlihatkan 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 instruksi CSS di bawah ini dan simpan di atas instruksi ]]></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 instruksi .PopularPosts .widget-content ul li:nth-child(1) - (10)

Jika Popular Post ini tidak rata kiri dengan widget lainnya, silahkan tambahkan margin-left minus, contohnya ibarat ini margin-left:-5px dan tambahkan pada instruksi .PopularPosts .widget-content ul

Kemudian jangan lupa untuk menghapus instruksi <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 instruksi ibarat di bawah ini:

             <!-- (1) No snippet/thumbnail -->
             <a expr:href='data:post.href'><data:post.title/></a>
 

Kemudian ganti dengan instruksi 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 ....

Sumber https://www.kompiajaib.com/

Share this post