Popular Posts Widget with Hover Effect for Blogger

Dhiraj Barnwal Saturday, 6 April 2013 28 comments


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.
Labels:
Google+ Pinterest

28 Comments to Popular Posts Widget with Hover Effect for Blogger Post Yours! Read Comment Policy ▼

Can you tell me how to make popular post widget but with one picture only.. and the other posts without picture.

Yah it can be done easily by adding simple CSS given below and adding your required style.

[pre]
.popular-posts ul li:first-child a {
Add Style Here
}[/pre]

Good blog, Keep blogging.

Hello admin,
Thanks for this valuable post. Nice code for me. This post is equally important & very wonderful resource.
I will follow all the steps on my blog.

Best Regards,
ataur

Great post. I was checking constantly this blog and I’m inspired! Extremely
useful info specifically the ultimate phase I deal with such information a
lot. I was looking for this particular information for a long time. Thank you and best
of
luck.

thank you! could you please tell me how to center the text underneath the image on the popular posts?
www.lucydesignsonline.com

hi,
great post and very cool hover effect.

i've add it to my blog, but somehow the hover effect is not appearing. have idea on what i have to check? is it related to the template i'm using?

Hey, Thanks for sharing this useful article and this wonderful widget code, Successfully implemented and looking cool, keep sharing stuff like this

thanks Admin for sharing very Excellent work

Nyc Thanks http://pclabe.blogspot.com/

Wow. this is a really awesome blogger widget. I would love to use it on my blog. You are really doing a great job of providing blogger tricks. I really enjoy your posts. Keep posting.

Will use it on my blog for sure.

I think this code is essential for blogging. I am taking help from here.Thanks a lot.

very helpful post brother. i like it

related pos not worked ..just a link :)

Don't know, if you can help me, but I'm gonna try to explain my problem:
I've had my perfect popular posts widget with 5 pics to click, vertically on the right sidebar and then delete it because didn't like it anymore, so stupid, I know!
And now try to get the same popular posts back easily created by the standard gadget of blogger.
It worked out but the pics look now now terrible, a kind of pixilated and a little bit bigger than before... Do you know whst I mean?

Please help! :-(

Just add the following code in your blog -
[pre]

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s300-c&#39;, &#39;s400&#39; );});});
</script>

[/pre]

Hello, this is just an amazing techy article, thanks I was looking for such blog which shares technical blog posts

These popular posts widgets are really awesome and is helpful for increasing pages views on our site with more time spend by the visitor also.

This has worked great at my site for several month, but lately it is only displaying 7 posts. I have not changed anything and it is still set to display 10 posts. Any idea why this is?

Hello Dear,
Thank You very much for this nice post. This is a great help for me. And it worked well for me.
THANKS

Bro can we convert any wp theme to blogger template ? Any solution, this wp theme>http://satside.com/

Thanks for your amazing blog posts, thanks I will definitely try your widget

Thank sir, i am gonna try on my site, is there any email support sir?

https://servershosting.cloud

thnks for share. keep up bro.