Home
Blogging

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 

                            or

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.

30 comments

  1. this is cool trick..thanks
  2. 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. thanks it works on my blog
    • 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..??
    • 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.
    • google for an external widget, and u will be able to do it, and/or use frames.
  5. 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...

      http://www.bloggerspice.com/2013/03/awesome-horizontal-popular-posts-widget.html
    • For some reason, changing that value isn't changing the size of the thumbnail. Would anything else work? Thanks in advance!
    • 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}

      Customization:
      change....width:150px...for maximizing width of the image thumbnails
    • Perfect!! Thank you so much for your help. It looks great!
  6. thanks for info,
  7. 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. 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
  9. Really fantastic blog ..about CSS basic concept..
    research methodology
    • yeh right I just used simple CSS trick to make it work.
  10. Well thankyou for providing this widget, well here is some new popular post widget for blogger check them out thanks,
  11. επισης και αυτο δεν μπενει ευχαριστω
  12. thank you. got it... Thank you sir mohammad
  13. 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.

    J.
    • 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.

      But...

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

      Thanks!

      J.
    • 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.
  14. 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>

Go Up