Elegant Popular Posts Widget Style

Blogger created a gadget to display the most Popular Posts from our own blog to increase our blogger blog's page impressions or page views and traffics. This allows our readers to find the best articles which is helpful and informative. However, blog readers aren't attracted by the default look of this widget, it doesn't look professional enough to attract any reader. But with the help of CSS we can change and modify the default style of this widget.

There are 4 different ways to display Popular Posts Widget:
1. Display only Posts title;
2. Display Posts title and snippets;
3. Display Posts title and image thumbnails; and
4. Display Posts title, snippets and image thumbnails.

Today I will share our very own Popular Posts Widget Style which displays Posts title and image thumbnails.

Step 1 : Adding the Gadget
 Go to Blogger
 Layout
 Add a Gadget
 Choose Popular Posts Widget
 Uncheck Snippet then Save

Step 2 : Navigating
 Go to Blogger
 Template
 Backup your Template
 Press Edit HTML

Step 3 : Adding the Code
 Search for ]]></b:skin>
 Copy the following code and paste it before ]]></b:skin>

/*--------------- Popular Posts ---------------*/
.PopularPosts .widget-content ul li .item-thumbnail img{
padding: 5px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
width: 100px;
height: 100px;
z-index: 99;
position:relative;
background:#fff;
-moz-box-shadow:  0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
.PopularPosts .widget-content ul li:hover img {
background:#00aa9f;
-moz-box-shadow:  5px 0 3px #007d75;
-webkit-box-shadow: 5px 0 3px #007d75;
box-shadow: 5px 0 3px #007d75;
border: 1px solid #007d75;
}
.PopularPosts .widget-content {
background:#fff;
padding: 0 10px;
}
.PopularPosts .widget-content ul li {
position:relative;
}
.PopularPosts .widget-content ul li .item-title {
position:relative;
left: 5px;
top: 20px;
z-index: 1;
}
.PopularPosts .widget-content ul li .item-title a{
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
text-decoration: none;
color:#00aa9f;
text-shadow:1px 1px 1px #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a{
color:#fff;
text-shadow:1px 1px 1px #00544f;
}
.PopularPosts .widget-content ul li .item-title:before {
left: 30px;
display: inline-block;
position: absolute;
content: "";
width: 0px;
height: 100%;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
position:absolute;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: -1;
background:#00aa9f;
}
.PopularPosts .widget-content ul li:hover .item-title:before{
width: 90%;
}

Step 3 : Finishing
 Save your Template

Customization :
 Change #007d75 to edit the border color and box shadow color of the image when hovered.
 Change #00aa9f to edit the background color when hovering and the post title color.

Subscribe to our NEWSLETTER for our upcoming posts! Let me know if you're facing any problems installing this widget. Enjoy blogging!