How to Add Rounded Thumbnail Popular Posts Widget In Blogger

Adding popular post widget is a way to attract your blog visitors. Because, it shows the posts, which are mostly visited by people. So more than half of your blog visitors will surf more pages on your blog. In previous post, I explained how to add numbered popular post widget in blogger. Now I'm going to introduce that rounded thumbnail popular post widgets to you. It is amazing widget like numbered popular posts widget.

Already we are using this rounded thumbnail popular posts widget in our blogs. It gives more impressions than others. So that we are recommending this popular posts widget also. Let me explain how to add this rounded thumbnail popular posts widget in blogger blog.

Step 1: Add The Popular Posts Widget In Layout

To Add the popular post widget in the right place to show this numbered popular posts widget on your blog using below steps.

Go to Blogger Dashboard --> Layout section --> Add a gadget --> Popular posts --> Save Template.

Step 2: Add Below CSS Code In Template to Make Rounded Thumbnail Popular Posts

• Go to Blogger Dashboard --> Template --> Edit HTML
• Copy ]]></b:skin> and Find it using Ctrl+F
• Add the below CSS code just before  ]]></b:skin>
• Click on Save template button

CSS Code:

.PopularPosts .widget-content {
font-size: 15px;
margin: 0 !important;
}
.popular-posts ul {
margin: 0 !important;
padding: 0 !important;
}
.popular-posts ul li {
list-style: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #FFFFFF;
padding: 0 !important; }
.popular-posts ul li:first-child {
border-top: 0;
}
.popular-posts ul li:last-child {
border-bottom: 0;
}
.popular-posts ul li:hover {
background: #fafafa;
text-decoration: none;
}
.popular-posts ul li a {
color: black;
display: block;
padding: 18px 24px; } .popular-posts ul li a:hover {
color: orange;
text-decoration: none; }
.PopularPosts img { background: #fff;
border: 1px solid #CCCCCC;
display: block;
float: left;
height: 58px;
margin-right: 8px;
padding: 3px;
width: 58px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.PopularPosts {
background: #F2F2F2;
border: 1px solid #E3E3E3;
}
.PopularPosts h2 {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIv4VMLWYKM8lONxASxJLQPUek6AaLx5sgYAAnaj7f1FfY_9cVFq8i96ZmawkbIuTqky3zLO8f1vd49q5D2_H4X9rReQchuz6lDmSeMlvNj8_KHMcpTN5dkA05fTRC_ErKpP3PlWIDXs/s1600/sidebar2_h22.png") no-repeat scroll 0% 0% transparent;
color: rgb(213, 213, 213);
height: 55px;
font-size: 14px;
font-weight: bold;
margin: 0px 0px -28px;
position: relative;
left: -8px;
top: -10px;
width: 365px;
text-align: center;
padding: 8px 0px 0px;
font-family: helvetica;
}

 That's all. You are done! 

If you encounter any problem, feel free and comment below to get solution. Share your experience with us. 

=======================