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.
Bagus says: 3/27/2013

Thanks for info,

BloggerSpice says: ADMIN 3/27/2013

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

Unknown says: 4/09/2013

thank you very much for the widget brother

MM Nauman says: 5/28/2013

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

BloggerSpice says: ADMIN 5/28/2013

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.

MM Nauman says: 5/28/2013

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

BloggerSpice says: ADMIN 5/28/2013

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

Admin - Ervan says: 6/07/2013

this is a good widget, visit my blog

Unknown says: 7/07/2013

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

BloggerSpice says: ADMIN 7/08/2013

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.

Unknown says: 7/08/2013
This comment has been removed by the author.
Unknown says: 3/17/2014

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?

BloggerSpice says: ADMIN 3/17/2014

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 ---

Don Nick says: 8/06/2014

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

Md. Goljar Ali says: 4/17/2015

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.

Unknown says: 10/03/2015
This comment has been removed by a blog administrator.
Ahmed Sheta says: 10/21/2015

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

BloggerSpice says: ADMIN 10/21/2015

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

Contact Form


Email *

Message *