Add Popular Posts Widget with Hover Effect to Blogger

A Popular Posts widget shows the most popular posts on your blog in order with an photograph thumbnail and also a snippet of the post. Anybody can add Blogger's official Popular posts widget by Hitting Blog Title → Layout → Add a Gadget → Popular Posts. For creating this widget more pleasing just be sure you have tested image thumbnail in addition to snippet pack. Blogger provides CSS for this widget within their default CSS files. We may overwrite these kind of CSS files and put new rules to generate it a lot more attractive.

This widget shows popular posts thumbnail along with post title and when the mouse is placed over, it shows snippet in a great manner.

Procedure of adding this widget to Blogger

First of all go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> by pressing Ctrl + F. Add the below given code just above ]]></b:skin>

/* Popular Post Customization by BloggerWP.com */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization by BloggerWP.com */

After adding the code click on Save Template. You are done. Your visitors can now see attractive Popular posts list on the sidebar of your blog.
Keep sharing it with your friends and share your views with us in the comment box till then Peace, Blessings and Happy Adding!