Cara Membuat Widget Populer Post Warna Warni (Pelangi)

Kali ini saya akan berbagi tutorial membuat popular post menjadi warna warni seperti pada gambar,atau juga bisa di lihat pada blog ini, yang tentunya akan membuat blog anda semakin cantik, apakan anda tertarik apabila tertarik? silahkan disimak di bawah.

Cara Membuat Widget Populer Post Warna Warni (Pelangi)

Apa yang membuat saya tertarik pada popular post yang berwarna warni? menurut saya tampilanya lebih keren dan cantik, danjuga lebih mencolok agar visitor tertarik untuk membacanya.

1. buka blogger.com dan masuk ke akun anda
2. cpoy seluruh script

/*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:#FF0000;}

.PopularPosts ul li:nth-child(2){background-color:#FF6600;}

.PopularPosts ul li:nth-child(3){background-color:#FF9900;}

.PopularPosts ul li:nth-child(4){background-color:#FFCC00;}

.PopularPosts ul li:nth-child(5){background-color:#FFFF00;}

.PopularPosts ul li:nth-child(6){background-color:#99FF00;}

.PopularPosts ul li:nth-child(7){background-color:#00CC00;}

.PopularPosts ul li:nth-child(8){background-color:#009999;}

.PopularPosts ul li:nth-child(9){background-color:#0033CC;}

.PopularPosts ul li:nth-child(10){background-color:#330099;}

.PopularPosts .item-thumbnail{margin:0 0 0 0}

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

3. kembali ke blogger pilih template => edit html
4. cari kode ]]></b:skin> agar lebih mudah gunakan kombinasi tombol ctrl+f untuk find (mencari)
5. paste kan seluruh kode tadi tepat di atasnya.
6. simpan template.
7. lanjut ke Tata letak => tambah widget => popular post.
    atur widget seperti screenshot di bawah. atau bisa diedit sendiri.

Cara Membuat Widget Populer Post Warna Warni (Pelangi)

8. klik tombol simpan. dan selesai lah sudah untuk membuat popular post berwarna warni.