CARA MEMBUAT WIDGET POPULAR POST DENGAN MULTI COLOR

Widget Popular Post Sangant berguna untuk Blog kita. Dengan itu pengunjung akan tahu Artikel apa yang paling banyak dibaca oleh pengunjung lain di blog kita. Naaahhhh,..... Sekarang bagaimana cara mempercantiknya.. ???????????. Sehingga pengunjug akan tertarik untuk melihat nya,...

Untuk Preview nya Sobat langsung lihat saja Di menu Popular post di Blog ini
Sekarang Simpan Template sobat

Bagaimana Cara Membuatnya ????

Masuk ke Dashboard --> Template --> Edit HTML --> Proceed
Backup dulu Template Sobat (Biar aman)
Tekan Ctrl+F untuk mencari kode dibawah ini

]]></b:skin>

Sekarang Paste Kode dibawah ini sebelum/Diatas kode tersebut

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li +
li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li +
li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li
+li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li +
li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li
+li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li +
li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li
+li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +
li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li
+li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +
li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +
li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li
.item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img{

    -moz-border-radius: 130px;

    -webkit-border-radius: 130px;

    border-radius: 130px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    transition: all 0.3s ease;

padding:4px;

    border:1px solid #fff !important;

    background: #F2F2F2;}#PopularPosts1 img:hover {

    -moz-transform: scale(1.2) rotate(-560deg) ;

    -webkit-transform: scale(1.2) rotate(-560deg) ;

    -o-transform: scale(1.2) rotate(-560deg) ;

    -ms-transform: scale(1.2) rotate(-560deg) ;

    transform: scale(1.2) rotate(-560deg) ;

}