Search Box by All Blogger Tricks

Sunday 8 September 2013

Popular Posts Widget with Hover Effect for Blogger


Freelance Jobs
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>

/* Popular Post Customization by AllBloggerTricks.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 AllBloggerTricks.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.
<<<<<****************************************************************>>>>>
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved