Cara Membuat Popular Post Berwarna Warni

KEYZEE Shared - Assalamualaikum Wr.Wb
Popular post adalah artikel yang sering dilihat oleh pengunjung.
Pada kali ini saya akan membagikan sebuah tutorial yang bernama "Cara Membuat Popular Post Berwarna Warni",dengan menggunakan widget ini tampilan blog kita akan terlihat lebih professional / menarik untuk dilihat. Untuk melihat tampilan Popular Postnya berwarna warni,anda bisa melihat gambar diatas ini.

Cara Memasang Widget Popular Post :

1.Masuk ke Halaman Dashboard Blog (Halaman Utama Blog)

2.Kemudian Klik Template -> EDIT Html

3.cari kode ]]></b:skin

4.lalu copy script dibawah ini,tepatkan kode dibawah ini 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.Yang Terakhir Simpan Template

ohh iyaa agar tampilan Popular Posts seperti gambar diatas,cara settingnya seperti ini :D

Selamat sekarang widget popular post sudah terpasang di blog anda,ohh iyaa anda juga bisa mengganti warna-warnanya sesuka anda!!!
Jika ingin mengganti Warnanya,anda bisa menggunakan website ini RGB Color

Contact Me :
Jika anda memiliki Pertanyaan/Kritik maupun saran,anda bisa menghubungi Contact admin KEYZEE Shared di bawah ini :

• Twitter : @muhammd_anggi
• Facebook : Muhammad Anggi 

Wassalamualaikum Wr.Wb

Tweet