Modifikasi Populer Post Warna Warni

Widget popular post merupakan widget yang salah satunya penting bagi blog, karena widget ini bertujuan untuk Mengetahui Postingan manakah yang paling banyak dibaca, atau artikel yang paling banyak dikunjungi, dan oleh karena itu dengan kalian yang ingin mencoba tutorialnya mangga silahkan .

dan dengan memodifikasi popular post warna warni pengunjung akan fresh dan juga betah dalam blog tersebut, nah jika kalian ingin membaca tutorial memodifikasi popular post warna warni silahkan kalian baca pada berikut ini .

Cara Modifikasi Popular Post Warna Warni :

• Buka Blogger Anda > lalu pergi ke dashboard
• Di samping kiri anda pada menu kalian klik "Template" dan kemudian klik "Edit HTML"
• Setelah itu masukkan kode dibawah ini diatas kode "]></b:skin>" dan jika template blog agan sudah dibuat menjadi Template valid CSS3 masukkan kode dibawah ini diatas kode "</style>"

.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;font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif;color:black;counter-reset:num;
}
.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;
}
.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0;padding:.5em 1.5em .5em .5em;counter-increment:num;position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {font-weight:bold;font-size:120%;color:inherit;text-decoration:none;
}
.PopularPosts ul li:before {content:counter(num);display:block;position:absolute;background-color:black;color:white;width:30px;height:30px;line-height:30px;text-align:center;top:50%;right:-10px;
margin-top:-15px;-webkit-border-radius:30px;-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

Nah Jika Kalian Sudah Mengopy kode diatas Klik Dibagian atas yaitu "Simpan Template"
Dan Pastikan Kalian sudah membuat popular post diblogger kalian. 

share : Facebook Twitter Google+ Linkedin Technorati Digg