Elegant Popular Posts Widget Style

Introduction

Popular Posts widget 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:
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 my very own Popular Posts Widget Style which displays Posts title and image thumbnails.

Adding the widget

Go to Blogger » Layout » Add a Gadget » Choose Popular Posts
*check both Thumbnails and Snippets
Click Save, then Save Arrangement

CSS

Go to Blogger » Template » Backup your Template » and Edit HTML
 Search for ]]></b:skin> then copy the following code above it

.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 .5s;-moz-transition:all .5s;transition:all .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;content:"";width:0;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 .5s;transition:all .5s;z-index:-1;background:#00aa9f}.PopularPosts .widget-content ul li:hover .item-title:before{width:90%}

 Save your Template

Final Words

To adapt your template design/color you can do changes like:
 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.

And that's it! Let me know if you're facing any problems installing this widget. Don't forget to Subscribe to our NEWSLETTER for our upcoming posts! Enjoy blogging!