Awesome Horizontal Popular Posts Widget For Bloggers Blog

Awesome Horizontal Popular Posts Widget For Bloggers Blog

popular posts

After releasing my first Horizontal Popular Posts widget I got more than thousands of hits on that post. So I have made plan to develop this widget for my readers. Finally I have redesign it that looks very charming.  This is the second version of Horizontal Popular Posts Widget. But it has some limitations that this widget is  best fit for displaying 5 posts max. On the other hand if you want to show Posts summary then all the posts summary won't be same on height. However you can show Posts summary. And I have set a code for not   to display Posts Title. So it's better to just showing Image thumbnail which you can show this widget as a featured posts or Most viewed posts. Don't worry I will try with my best to work on that, I know many blogger want to use this 'Horizontal popular Post' widget because it doesn't occupy extra space from your templates. So let's proceed to the tutorial.

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.

hot posts

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.


  • Uncheck snippet. Because we will display only popular Post's image Thumbnail. 
  • You can display between 1 to 5 posts. So choose 5 posts Max.

Most viewed posts

Step 4 Now Save the  "Popular Posts" Gadget.

Step 5 Click on -> Template -> Edit HTML

Step 6 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

Step 7 Paste the below code  Before/above ]]></b:skin> 

/*--Horizontal Popular Post By*/
#PopularPosts1 li{display:inline;list-style:none;width:155px;float:left;text-align:left;padding:0 0 0 5px}
#PopularPosts1 .item-title{display:none;list-style:none;float:left;text-align:left;width:100px;font-size:.80em}
.PopularPosts .widget-content ul li{
border:3px solid #333333;
float: center;
list-style: none outside none;
margin: 5px 0 0!important;
padding: 5px !important;
.PopularPosts .item-thumbnail{
margin: 3px !important;
.item-thumbnail img{
border: 1px solid #111111;
height: 80px;
padding: 5px;
width: 115px;
.item-thumbnail img:hover{
border:0px solid #111111;

Step 8 Now Save the widget.

And check your Popular post to see the new style. Thank you.
Awesome Horizontal Popular Posts Widget For Bloggers Blog
4 Stars stars - "Awesome Horizontal Popular Posts Widget For Bloggers Blog" After releasing my first Horizontal Popular Posts widget I got more than thousands of hits o...

Post a Comment

Thanks for info,

Oh I just visited your site the color combination is awesome and many many thanks to use my widget.

thank you very much for the widget brother

Hey hello admin Yesterday i have written a comment I think IT was Not Published why .......And One Thing This popular Post Widget is Not Getting Fixed IN my blog when i take 5 it is coming out and when i take 4 it is not getting in middle space will be as it help me...........And Check My Blog Latest games and softwares

Yesterday I didn't got any comment from u..because I publish all negative and positive comment except spam.

In this widget you can change the width of the image plz change width: 115px; for best fit. if you want to use 5 then reduce the image width. Hope it will solve your problem.

And One Request from me please i want your cartoon characters ............As I'm loyal reader of this site so please accept my request brother.............hope the the result will be positive

plz. check new unique cartoon character from below link---

this is a good widget, visit my blog

Bro in your BS MAG TEMPLATE WHICH I AM Using in my Blog
Whenever I added any code before ]]> It shows on the Header without implemending....Why this Fault Came ??? please Help me

Bro this template totally CSS based and already added many CSS features. But sometime this kinds of problem will show because you have to add CSS and HTML part of any widget properly. Suppose I you will see above b:skin many CSS code if it appear above header then change the CSS code placement add it beginning of b:skin instead of end of b:skin..Hope it will solve your problem.

This comment has been removed by the author.

Hey this worked perfectly for me and I was very happy with the results, but when I changed my image size from 115px to 200px so it would look better with the width of my blog the image only became more pixelated and warped. Is that something I can fix with some minor coding or is that just how it'll be?

Hi Natalia...Popular post widget is an integrated widget in Google Blogger platform. We can't change the image quality but we can change the appearance by using CSS code. If you want to increase the width then you should reduce the number of Popular post that will display in your blog. Remember increasing width and height may blur your popular post image.

However if you want to change the wrapping color (yellow) then just change the color code


You will get the more color code from below links ---

hello i applied the code but it not working and the post remain vertical

This is an awosome post for Blogger site ! I will try you all methods for my blogger site. Please visit my site and make comment.

This comment has been removed by a blog administrator.

Many Thanks ,,, but can you make it auto-sliding/moving .. + title below pictures ?

Hi Ahmed..I didn't develop animated Popular Post. Hopefully I will develop later. You can check another simple version of this horizontal popular post

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *