Tutorial : Widget Popular Post Warna-Warni

1.Blogger Dashboard > Layout > Add A Gadget > Pilih Popular Post
2.Configure Popular Post
3.Sila UNtick pada image thumbnail dan snippet
4.Save!

Langkah Seterusnya!
1.Blogger Dashboard > Template > Edit HTML > Proceed > Tick Expand Widget
2.Ctrl + F , cari

]]></b:skin>

3. Copy kod bawah ni paste kan diatas kod yang korang cari tadi

/* Rainbow Popular Post by http://hzndi.blogspot.com*/
-------------------------------------------------------------------------
#PopularPosts1 ul li a:hover{color:#000;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px; color: #989694;
display: block;
font-family: 'Quicksand', sans-serif;font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px; margin: 0px 40px 0px 0px;
min-height: 30px; orphans: 2; padding: 0px;
text-align: -webkit-auto;
text-decoration: none !important;
text-indent: 0px; text-transform: none;
white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px;
}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after
{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
border:2px solid #e5e5e5;
background:#fff;
-webkit-box-shadow:0px 0px 5px #f8d5d7;
-moz-box-shadow: 0px 0px 5px #f8d5d7;
width:30px;height:30px;line-height:1em;
text-align:center;font-size:28px;color:#fff
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#fff;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#fff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#fff;width:90%}
#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:#fff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#fff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#fff;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#fff; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#fff;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;
border:2px solid #f8d5d7;
-webkit-box-shadow:3px 3px 3px #f8d5d7;
-moz-box-shadow: 3px 3px 3px #f8d5d7;
padding:10px
}

4. Dah ? Preview dulu. Kalau jadik baru save!