Popular Post Widget With ahover Effect

A Popular Posts widget shows the list of most popular posts on your blog along with an image thumbnail and a snippet of the post. One can add Blogger's official Popular posts
widget by Clicking on Blog Title → Layout →Add a Gadget → Popular Posts.
For making this widget more attractive make sure that you
have checked image thumbnail and snippet box. Blogger provides CSS for this widget in their default CSS file. We will overwrite these
CSS rules and add new rules to make it even more attractive.
The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. You can see the demo of this widget by clicking on the below link. The popular post
widget is on the right sidebar, just scroll a bit. 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>
CODE:
/* Popular Post Customization by Allin1web.blogspot.com */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;wid
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opaci
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narr
/* Popular Post Customization by Allin1-web.blogspot.com */

You May Like:
1.Follow Me Social Truck Like Button For Blogger