Home
Blogging

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.

Note

  • 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 www.bloggerspice.com--*/
#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{
background:#FFCC00;
border:3px solid #333333;
border-radius:10px;
float: center;
color:#11111;
list-style: none outside none;
margin: 5px 0 0!important;
padding: 5px !important;
}
.PopularPosts .item-thumbnail{
margin: 3px !important;
}
.item-thumbnail img{
background:#333333;
border: 1px solid #111111;
height: 80px;
padding: 5px;
width: 115px;
border-radius:10px;
}
.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.

18 comments

  1. Thanks for info,
    • Oh I just visited your site the color combination is awesome and many many thanks to use my widget.
  2. thank you very much for the widget brother
  3. 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 is............so 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.
  4. 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---

      http://www.bloggerspice.com/2013/05/new-cartoon-character-set-widget-to.html
  5. this is a good widget, visit my blog www.devaninc.blogspot.com
  6. Bro in your BS MAG TEMPLATE WHICH I AM Using in my Blog www.mytechblaze.blogspot.com
    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.
  7. 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

      background:#FFCC00;

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

      http://www.bloggerspice.com/p/blog-page_9433.html
      http://www.bloggerspice.com/p/color.html
  8. hello i applied the code but it not working and the post remain vertical
  9. 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.
    http://www.infotechlife.com
  10. This comment has been removed by a blog administrator.
  11. 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

      http://www.bloggerspice.com/2013/01/horizontal-popular-posts-with-css-trick.html
Go Up