Popular Posts Widget with Hover Effect for Blogger

Posted On // 26 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.

26 comments

Parallel Blog Author
1 May 2013 at 20:50

good one. you created?

Reply
Daniel Author
3 July 2013 at 02:24

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

Reply
3 July 2013 at 04:44

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]

Reply
Ujjwal Sen Author
20 July 2013 at 09:31

Good blog, Keep blogging.

Reply
21 August 2013 at 19:53

Really Good.

Reply
ataur Author
26 August 2013 at 20:03

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

Reply
Ghost Rider Author
16 September 2013 at 10:03

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.

Reply
ROHIT MEWADA Author
19 October 2013 at 14:00

Grate Post with New Idea.

Reply
Lucy Designs Author
20 October 2013 at 11:42

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

Reply
-langkahbaru- Author
5 November 2013 at 18:23

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?

Reply
17 December 2013 at 00:49

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

Reply
Rajasthan Author
21 January 2014 at 23:20

thanks Admin for sharing very Excellent work

Reply
Pak Admin Author
2 February 2014 at 23:54

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

Reply
Jobs Author
19 February 2014 at 02:48

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.

Reply
Rahul Author
22 March 2014 at 02:42

Will use it on my blog for sure.

Reply
16 April 2014 at 10:14

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

Reply
1 October 2014 at 10:43

very helpful post brother. i like it

Reply
x-CODE-shadow Author
23 October 2014 at 08:53

related pos not worked ..just a link :)

Reply
Anonymous Author
24 October 2014 at 01:38

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! :-(

Reply
25 October 2014 at 08:39

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]

Reply
14 December 2014 at 08:42

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

Reply
Gautam Author
15 April 2015 at 04:58

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.

Reply
Chris Charles Author
19 July 2015 at 10:33

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?

Reply
sujon007bd Author
15 September 2015 at 03:57

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

Reply
Awn Shah Author
16 October 2015 at 20:11

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

Reply
23 October 2015 at 20:12

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

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Popular Posts Widget with Hover Effect for Blogger |