Horizontal Popular Posts Widget for Blogger

Horizontal Popular Posts with CSS Trick

Comments: 32
Popular posts

One of the new tricks that I would like to share Horizontal Popular Posts . It's an interesting way to attract visitors to other texts that might not show on the homepage, in addition to showing the subjects that most pleases your readers. However, by default, the Popular posts appears vertically and without using sidebar there has no any possibility to show it in other areas of the templates, As a result it occupy enough space lateral column, even if you choose a few posts to show. So I will give you a simple CSS code to show the popular post Horizontally.

First of all add a Popular Posts widget from Layout Page and place the widget below header or above footer. If you don't have any widget container then you can create by using a simple trick.

Recommended: Add An Additional New widget Container Below Header And Above Footer Column

Make sure to take a backup of your Template before making any changes.

Step 1 Go to your Blogger Dashboard and click on -> Template -> Customization

Step 2 Select Add CSS Code

Step 3 Copy and paste the any one code from below in your blog 


Step 1 Click on -> Template -> Edit HTML

Step 2 Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)   

Step 3 Paste any code from below Before/above ]]></b:skin> 
/*Horizontal Popular Post By www.bloggerspice.com*/
#PopularPosts1 li{display:inline;list-style:none;width:150px;float:left;text-align:center;padding:0 0 0 5px}
#PopularPosts1 .item-title{display:inline;list-style:none;float:left;text-align:center;width:150px;font-size:.80em}
#PopularPosts1 .item-thumbnail img{width:150px;height:100px;padding:0px;margin:0px}

Step 4 Once you added CSS code save your template and back to blogger.

Recommended: Awesome Horizontal Popular Posts Widget For Bloggers Blog

It will work like magic without using any bigger code block. If you face any problem just leave a comment below. I will try to help you.

Speak Your Mind

this is cool trick..thanks

I have tried both codes and neither one of them worked. Any idea what might be wrong?

This code works most of the templates. Add popular posts with 5/6 posts first and then apply the code. If does not work then add this code above/before ]]> of your blogger templates and save it. Hope it will work now.

Or you can send me a backup of your template then I will try to fix it.

thanks it works on my blog

many many thanks for your feedback.

hey i want to show popular posts of one blog in my other blog.. how can i do that..??

Popular Post is a integrated widget by Google Blog. So we can't move it. If we can produce popular post widget code then it is possible. But you use some widget from BloggerSpice to show your posts. Such as Recent Post, Random Posts widget or you can use Facebook Recommendation Box to show one blog's posts to another.

This worked perfectly, thanks so much! Is there a way to change the size of the thumbnails?

change width:100px with your desire size..I have recently develop another awesome horizontal popular post if you like you can install it in your template...plz. visit through below link...


For some reason, changing that value isn't changing the size of the thumbnail. Would anything else work? Thanks in advance!

thanks for info,

thanks again chelsea for comments..please replace the old code with the below code block---

#PopularPosts1 li{display:inline;list-style:none;width:150px;float:left;text-align:center;padding:0 0 0 5px}
#PopularPosts1 .item-title{display:inline;list-style:none;float:left;text-align:center;width:150px;font-size:.80em}
#PopularPosts1 .item-thumbnail img{width:150px;height:100px;padding:0px;margin:0px}

change....width:150px...for maximizing width of the image thumbnails

Perfect!! Thank you so much for your help. It looks great!

awesome popular post widget leaves an impressive impression on the readers describing what are the most visited pages and posts on your website so it must be designed charismatic and your widget has that potential.popular post widget for blogger

awesome popular post widget leaves an impressive impression on the readers describing what are the most visited pages and posts on your website so it must be designed charismatic and your widget has that potential.popular post widget for blogger

thanks bro. I am glad to hear that

i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.ringtones

Really fantastic blog ..about CSS basic concept..
research methodology

yeh right I just used simple CSS trick to make it work.

Well thankyou for providing this widget, well here is some new popular post widget for blogger check them out thanks,

επισης και αυτο δεν μπενει ευχαριστω

Great Post, I love to read articles that are informative and actually have good content. Thank you for sharing your experiences and I look forward to reading more.America

Thanks Kiron for your comment.. and you are always welcome to BloggerSpice. :)

google for an external widget, and u will be able to do it, and/or use frames.


thank you. got it... Thank you sir mohammad

Hi, Very good gadget. It is working almost perfect.

The only problem is that the thumbnails are blurred, not very good quality.

How can I fix that?

Thanks very much.


Hi Joao..Actually Popular post widget's default image size is 55px X 55px and I have resize it into width:150px X 100px Height. for this reason it becomes little blur. if you just reduce the image size then it will be more clear. for example make it 1width:120px X 100px Height..then it will be more clear. Thanks

Thanks for your attention. That is what I have done.


Is there anyway I can put bigger images with good quality?



Still I didn't find any solution about this. I have already consult with many blog developer and designer but even they failed find any solution.

If the images are blurry, look for resizeImage(data:post.featuredImage and change the number that is after it.

Hi Amanda,
Thanks for your suggestion. After releasing this widget later I got a solution to make image clear. But forget to add it in tutorial. You can make image clear by adding a piece of JavaScript

<script type='text/javascript'>//<![CDATA[function resizeThumb(c,d){for(var b=document.getElementById(c).getElementsByTagName("img"),a=0;a<b.length;a++)b[a].src=b[a].src.replace(/\/s72\-c/,"/s"+d+""),b[a].width=d,b[a].height=d}resizeThumb("PopularPosts1",300);var newSize=300;$(".popular-posts .item-thumbnail img").each(function(){var c=$(this).attr("width");$(this).attr("width",newSize);$(this).attr("height",newSize);$(this).attr("src",$(this).attr("src").replace("/s"+c+"-c/","/s"+newSize+"-c/"))});//]]></script>

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *