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 


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.
Go Up