Horizontal Popular Posts Widget for Blogger

Horizontal Popular Posts with CSS Trick

Comments: 32
data:blog.title
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.

Related Post

Speak Your Mind

this is cool trick..thanks

My best friends blog says: 1/31/2013

I have tried both codes and neither one of them worked. Any idea what might be wrong?

Anonymous 1/31/2013

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.

KAREN BERDOS says: 2/28/2013

thanks it works on my blog

Blogger Spice says: ADMIN 2/28/2013

many many thanks for your feedback.

UnlimitedSofts says: 3/15/2013

hey i want to show popular posts of one blog in my other blog.. how can i do that..??

Mohammad Fazle Rabbi says: 3/15/2013

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.

Chelsea Frajerman says: 3/31/2013

This worked perfectly, thanks so much! Is there a way to change the size of the thumbnails?

Mohammad Fazle Rabbi says: 3/31/2013

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

Chelsea Frajerman says: 3/31/2013

For some reason, changing that value isn't changing the size of the thumbnail. Would anything else work? Thanks in advance!

Bagus says: 3/31/2013

thanks for info,

Mohammad Fazle Rabbi says: 3/31/2013

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

Chelsea Frajerman says: 4/02/2013

Perfect!! Thank you so much for your help. It looks great!

Rohan Mod says: 4/14/2013

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

Rohan Mod says: 4/14/2013

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

Mohammad Fazle Rabbi says: 4/15/2013

thanks bro. I am glad to hear that

harsh king says: 5/07/2013

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

Tutorsindia says: 5/25/2013

Really fantastic blog ..about CSS basic concept..
research methodology

Mohammad Fazle Rabbi says: 5/25/2013

yeh right I just used simple CSS trick to make it work.

amir says: 6/10/2013

Well thankyou for providing this widget, well here is some new popular post widget for blogger check them out thanks,

Synergaths Radio News says: 11/09/2013

επισης και αυτο δεν μπενει ευχαριστω

Mazharul Islam Kiron says: 2/04/2014

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

Mohammad Fazle Rabbi says: 2/05/2014

Thanks Kiron for your comment.. and you are always welcome to BloggerSpice. :)

Nuno Carvalho says: 7/10/2014

google for an external widget, and u will be able to do it, and/or use frames.

Ira says: 7/29/2014

YOU ARE SIMPLY THE BEST!!!!!!!!!


Neil Christian says: 9/20/2014

thank you. got it... Thank you sir mohammad

Joao Camaleon says: 2/01/2015

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.

Mohammad Fazle Rabbi says: 2/01/2015

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 says: 2/01/2015

Thanks for your attention. That is what I have done.

But...

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

Thanks!

J.

Mohammad Fazle Rabbi says: 2/02/2015

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.

Amanda says: 8/19/2016

If the images are blurry, look for resizeImage(data:post.featuredImage and change the number that is after it.

Mohammad Fazle Rabbi says: 8/21/2016

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>

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *