Cara memasang widget popular post berwarna-warni di blog

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Halo sobat blogger, nah setelah sebelumnya saya membahas mengenai seo kali ini saya akan membahas sedikit tutorial mengenai cara memasang widget popular posts berwarna – warni pada blog.  widget popular posts seperti ini ialah widget popular post yang terdapat pada template evomagz buatan mas sugeng, sobat juga pasti pernah melihat widget blog seperti ini.

Popular Post bermanfaat untuk menunjukkan artikel – artikel populer atau artikel yang paling banyak dibaca oleh pengunjung pada blog itu, widget ini dapat membantu visitor menemukan artikel yang dirasa bermanfaat dan bisa menambah pageview sobat terlebih lagi jika tampilan widgetnya menarik seperti ini.

Sebelumnya saya juga ingin menerapkan widget seperti ini pada blog saya namun ternyata pengunjung blog ini sudah terbiasa dengan widget popular post disini akhirnya saya memutuskan untuk tetap menggunakan popular post yang lama. 

Oke kita langsung masuk ke tutorialnya, namun sebelumnya silahkan sobat hapus terlebih dahulu css popular post bawaan template sobat. sobat bisa menggunakan ctrl+f  lalu ketikkan .popularposts lalu hapus sederetan cssnya dan ganti dengan css dibawah ini

/*Custom Popular Post*/

.PopularPostsul,.PopularPostsli,.PopularPostsliimg,.PopularPostslia,.PopularPostsliaimg {margin:00;padding:00;list-style:none;border:none;background:none;outline:none}

.PopularPostsul{margin:.5em 0;list-style:none;color:black;counter-reset:num}

.PopularPostsulli{background-color:#eee;margin:0000!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}

.PopularPostsullia{color:#fff!important}

.PopularPostsullia:hover{color:#2c3e50!important}

.PopularPostsulli:before,.PopularPostsulli.item-titlea,.PopularPostsullia{font-weight:bold;color:inherit;text-decoration:none}

.PopularPostsulli:before{content:counter(num)!important;display:block;position:absolute; background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */

.PopularPostsulli:nth-child(1){background-color:#f1c40f;}

.PopularPostsulli:nth-child(2){background-color:#f39c12;}

.PopularPostsulli:nth-child(3){background-color:#2ecc71;}

.PopularPostsulli:nth-child(4){background-color:#27ae60;}

.PopularPostsulli:nth-child(5){background-color:#e67e22;}

.PopularPostsulli:nth-child(6){background-color:#d35400;}

.PopularPostsulli:nth-child(7){background-color:#3498db;}

.PopularPostsulli:nth-child(8){background-color:#2980b9;}

.PopularPostsulli:nth-child(9){background-color:#ea6153;}

.PopularPostsulli:nth-child(10){background-color:#c0392b;}

.PopularPosts.item-thumbnail{margin:0000}

.PopularPosts.item-snippet{font-size:11px}

Silahkan sobat ganti kode warna yang biru tua dengan kode sesuai keinginan sobat lalu simpan. 

Selanjutnya masuk ke tata letak dan tambahkan gadget entri populer lalu simpan.

Tag : Blog