Cara Membuat Widget Popular Post Warna Warni

Cara Membuat Widget Popular Post Warna Warni - Widget popular post yang sangat colourfull ditambah icon dan nomor urut yang pastinya akan membuat tampilan blog sobat lebih keren lagi.Seperti apa demonya, kira-kira ya seperti gambar diatas. Widget ini sangat bagus untuk blog pribadi sobat ataupun bisa juga sebagai pemanis tampilan toko online sobat.Terus cara buatnya bagaimana ? cara membuat nya juga sangat gampang, tinggal sobat ikuti dua langkah dibawah ini :

1. Sobat pilih pada konfigurasi widget Posting Populer, pastikan bahwa sobat memilih model widget berupa thumbnail dan judul.

2. Masukan kode CSS dibawah ini dan letakkan di atas kode ]]></b:skin> atau </style> :

/* Custom CSS for Blogger Popular Post Widget */
.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 "Arial Narrow",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 & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Set elah itu sobat simpan, dan selesai.

Selamat, sobat sudah punya widget popular post warna-warni yang keren.

Script : http://www.dte.web.id