Cara Membuat Popular Post Warna Warni Tanpa Thumbnail

Tips blogger kali ini saya akan membahas sedikit tentang bagaimana cara memodifikasi popular post tanpa gambar di blog agar tampil lebih menarik lagi. Nah popular post ini nantinya akan berwarna warni dimana di setiap artikel berbeda memilik warna yang berbeda. Namun sebelum itu kalian pasti sudah mengetahui apa itu populer post. Popular post adalah Artikel populer atau postingan populer yang dimana Artikel populer ini di dapatkan dari hasil pageviews terbesar.

Pada umumnya widget popular post sangat penting dipasangkan di blog. Mengapa demikian? karena widget ini dapat membantu pengunjung di dalam menemukan artikel popular pada blog. Selain itu desain dari widget postingan populer yang akan saya bagikan memiliki desain unik dan menarik. Lalu bagimana cara membuat popular post dengan desain warna warni di blog? Silahkan anda simak dan terapkan cara pembuatannya pada berikut ini.

Cara Membuat Popular Post Warna Warni Tanpa Thumbnail Di Blog

1. Langkah pertama pastinya anda masuk dan login ke dalam dashboard blog anda.

2. Kemudian pilihlah menu Template > Edit HTML. Kemudian anda hapus kode script popular post default pada template anda. Lalu tambahkan kode script css ini tepat di atas kode </style> atau ]]</b:skin>.

/*Media Babe Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts img{float:left;margin:0 5px -10px 0;display:inline;opacity:10}
.PopularPosts a{color:#fff!important;}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li: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*/
.PopularPosts ul li:nth-child(1){background-color:#0091cd;}
.PopularPosts ul li:nth-child(2){background-color:#56a0d3;}
.PopularPosts ul li:nth-child(3){background-color:#81ceff;}
.PopularPosts ul li:nth-child(4){background-color:#537b35;}
.PopularPosts ul li:nth-child(5){background-color:#8ec06c;}
.PopularPosts ul li:nth-child(6){background-color:#ecb731;}
.PopularPosts ul li:nth-child(7){background-color:#cc7a00;}
.PopularPosts ul li:nth-child(8){background-color:#9f9fa3;}
.PopularPosts ul li:nth-child(9){background-color:#6a737b;}
.PopularPosts ul li:nth-child(10){background-color:#4d4f53;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

3. Langkah berikutnya simpan template. Dan lihat hasilnya.

Ket :

Anda bisa mengubah warna pada popular post sesuai dengan keinginan anda dengan cara mengganti background-color pada kode script pengaturan warna.

4. Silahkan ganti pengaturan popular post anda pada widget di tata letak. Setelah itu hilangkan centang pada gambar dan cuplikasi kemudian simpan widget.

Demikianlah bagaimana cara membuat entri populer dengan warna-warni di blog. Semoga bermanfaat guys.