Horizontal Popular Post Widget using CSS

'Recent Posts' widget or 'Popular Posts' widget is very essential widget (or gadget) for blogger blog. This widget displays your blog popular posts based upon some analytic result along with snippet, images etc which are also optional. By default blogger provides some styles for this widget but somehow these are obsolete and unprofessional. I have written quite a few posts about customization of this widget. This post is also one of those customization but a little different. Here i shall show you how to display popular posts or recent posts in horizontal manner instead of vertical. The main and only problem is that it requires larger horizontal space i.e. larger width of of your blog. So before you proceed, make sure you have enough room in your blog to display posts horizontally.

Features :
• Full control over 'Image thumbnail' view.
• Full control over 'Snippet' view.
• If you have checked 'Show image thumbnail' but unfortunately your blog post contains no image, then image thumbnail will be automatically filled by a preassigned image (no-image) as shown in the figure.

Screenshots :

• 

All right, let's proceed.

Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
It is just a cautionary statement. Don’t get scared. Just stay serious.

Let's proceed.

1. Sign in to Blogger.
2. Click the Drop-down arrow adjacent to 'Go to post list' icon.
   
3. Click 'Layout' form the drop-down menu list. It will take you to the layout section of different widgets (or gadgets) of your blog.
4. Click 'Add a Gadget' link as shown in the fig below. A new window will open that contains list of all gadgets available.
   
5. Scroll down and when you see 'Popular Posts' gadget, click on it or click the '+' icon as shown in fig below.
   
6. This will take you to a new window named as 'Configure Popular Posts'.
   • Select the 'Most viewed' option to 'All time' .
   • Select number of the post(s) in 'Display up to' section.
   • Check 'image thumbnail' if you want to show it, otherwise leave it as unchecked.
   • Check 'snippet' if you want to show some post texts along with its title.
   
   
   
7. Hit 'Save'
If your blog already contains this widget, you don't need to repeat the part that has been discussed so far.
8. Click 'Template'
   
9. Click 'Edit HTML'.
   
10. Make sure that 'Expand Widget Templates' is checked. If you are using new interface of blogger, you don't have to do this part. 'Expand Widget Template' is checked by default in blogger new user interface.
11. Search for (
    Ctrl
    +
    f
    ) </b:skin and paste these codes before </b:skin

/*--Horizontal Popular Post using CSS by Bloganalyzer --*/

.PopularPosts li{
display: inline;
list-style: none;
width: 200px;
height: 150px;
float: left;
text-align: justify;
background: #e4e4e4;
border: 1px solid #333333;
color: #11111;
margin: 5px;
padding: 5px;
line-height: 1.2em;
}
.PopularPosts .item-title{
text-align: left;
width: 200px;
font-size: 20px;
background: #afafaf;
padding: 5px;
border-bottom: 1px solid #868686;
border-right: 1px solid #868686;
margin-bottom: 5px;
}
.item-thumbnail img{
height: 80px;
width: 80px;
}

12. Click on 'Jump to widget', select 'PopularPosts1' from the drop down menu (if you are using blogger new interface) and find 'Show snippets and thumbnails'. You can also search for 'Show snippets and thumbnails' (applicable for both new and old interface)
    
13. You will find a code something like that

<!-- (4) Show snippets and thumbnails -->
  <div class='item-content'>
    <b:if cond='data:post.thumbnail'>
      <div class='item-thumbnail'>
        <a expr:href='data:post.href' target='_blank'>
          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
        </a>
      </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
  </div>

14. Replace that code with this code. I should remind you to backup your template before any further movement.

<!-- (4) Show snippets and thumbnails -->
  <div class='item-content'>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <b:if cond='data:post.thumbnail'>
      <div class='item-thumbnail'>
        <a expr:href='data:post.href' target='_blank'>
          <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
        </a>
      </div>
    <b:else/>
      <div class='item-thumbnail'>
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK9L8P0WXpwjmObAUJU3ijNEXfhxUA9ysrGO9GyLnD85a5Zmn8UmoDPtqM1u4ce2CLwVo_KQb-_jZhFIYRAJnmniUs4ST9gTgSa6v3bUO1fFskhPjKfHpqFQBX7IN-8tgiZsyw_mE0gHs/s400/noimage.png'/>
      </div>
    </b:if>
    <div class='item-snippet'><data:post.snippet/></div>
  </div>

15. Hit 'Save template'

If you have any questions on this, please let me know. Enjoy !