TUTORIAL IT

Popular Posts Widget With Hover Effect For Blogger

One of blogger tips and tricks you should try out. You'll love the result. This popular post widget shows the Thumbnail and Post Title when the page is fully loaded. When hovered over, a bouncing snippet effect takes place.

Also Read: Scrolling Popular Post Gadget For Blogger



1. To Add this popular post gadget to your blog, goto your blogger dashboard, click on 'Layout', 'Add A Gadget'.Select the Item Snippet and Image Thumbnail options before saving.

2. Goto your blogger template, click on 'edit html', using ctrl+f search for ]]></b:skin> copy and paste this code below just 'above' ]]></b:skin>

Also Read: Square Popular Posts Blogger Gadget with Rotating Effect


/* Popular Post Customization by informationtutorial158.blogspot.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 informationtutorial158.blogspot.com */