1 Menit Membuat Popular Post Blog Anda Berwarna

Selamat malam sobat. Kali ini saya akan posting cara bagaimana membuat tampilan popular post di blog kita menjadi berwarna. Banyak sih sebenernya caranya. Tapi kali ini saya akan share warna yang menurut saya bagus, yaitu yang saya pasang di blog saya ini hehe.

Bagaimana menurut sobat warna dalam popular post diatas? Kalo menurut saya itu bagus haha.

Berikut adalah cara membuat popular post warna-warni:

1. Log In ke Blogger 
2. Pilih Template >> Edit HTML
3. Kemudian silahkan sobat cari kode ></b:skin>
4. Setelah ketemu, silahkan copy kode berikut ini kemudian letakkan diatas kode ></b:skin>
   /*Custom 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 ul li a{color:#fff!important}
   .PopularPosts ul li a:hover{color:#2c3e50!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:#f1c40f;}
   .PopularPosts ul li:nth-child(2){background-color:#f39c12;}
   .PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
   .PopularPosts ul li:nth-child(4){background-color:#27ae60;}
   .PopularPosts ul li:nth-child(5){background-color:#e67e22;}
   .PopularPosts ul li:nth-child(6){background-color:#d35400;}
   .PopularPosts ul li:nth-child(7){background-color:#3498db;}
   .PopularPosts ul li:nth-child(8){background-color:#2980b9;}
   .PopularPosts ul li:nth-child(9){background-color:#ea6153;}
   .PopularPosts ul li:nth-child(10){background-color:#c0392b;}
   .PopularPosts .item-thumbnail{margin:0 0 0 0}
   .PopularPosts .item-snippet{font-size:11px}
5. Kemudian SAVE

Bagaimana? Mudah bukan? Semoga artikel ini dapat membantu kegundahan hati sobat ya