Horizontal Popular Posts Widget for Blogger

Horizontal Popular Posts with CSS Trick
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.

You may like these posts


  1. this is cool trick..thanks
  2. My best friends blog
    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.
  3. Allen
    thanks it works on my blog
    • BloggerSpice
      many many thanks for your feedback.
  4. hey i want to show popular posts of one blog in my other blog.. how can i do that..??
    • BloggerSpice
      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.
    • Unknown
      google for an external widget, and u will be able to do it, and/or use frames.
  5. Unknown
    This worked perfectly, thanks so much! Is there a way to change the size of the thumbnails?
    • BloggerSpice
      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...

    • Unknown
      For some reason, changing that value isn't changing the size of the thumbnail. Would anything else work? Thanks in advance!
    • BloggerSpice
      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
    • Unknown
      Perfect!! Thank you so much for your help. It looks great!
  6. thanks for info,
  7. Rohan Mod
    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
  8. Rohan Mod
    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
    • BloggerSpice
      thanks bro. I am glad to hear that
  9. Unknown
    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
  10. Tutorsindia
    Really fantastic blog ..about CSS basic concept..
    research methodology
    • BloggerSpice
      yeh right I just used simple CSS trick to make it work.
  11. Amir
    Well thankyou for providing this widget, well here is some new popular post widget for blogger check them out thanks,
  12. Tromero.eu
    επισης και αυτο δεν μπενει ευχαριστω
  13. Unknown
    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
    • BloggerSpice
      Thanks Kiron for your comment.. and you are always welcome to BloggerSpice. :)
      YOU ARE SIMPLY THE BEST!!!!!!!!!

  14. Neil Christian
    thank you. got it... Thank you sir mohammad
  15. Joao Camaleon
    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.

    • BloggerSpice
      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
    • Joao Camaleon
      Thanks for your attention. That is what I have done.


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


    • BloggerSpice
      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.
  16. Amanda
    If the images are blurry, look for resizeImage(data:post.featuredImage and change the number that is after it.
    • BloggerSpice
      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>

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up