Add Multi Color Popular Post Widget To Blogger:

Step-1 Add A Popular Post Widget To Blogger Template :

1. Go To Blogger > Layout
2. Click On the “Add a Gadget”
3. Choose “Popular Posts” Widget From The List
4. Set the number of post to more than 5 for better look
5. Check The Image Thumbnail Box
6. Now Save the widget

Your setting will looks like this

You can see a popular post widget in your blog.

Step 2 : Customize Popular Post For Round Image Thumbnail :

1. Go to blogger > Template
2. Cluck on Edit HTML
3. Search for ]]></b:skin>
4. Above this ]]></b:skin> , paste the below given CSS code.

#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) ; 
}

5. Now save it.You are done!!
Now refresh your blog, you can see a stylish Popular Post Widget With multi color Thumbnail.
If you will face any problem then feel free to ask…