Customize Popular Post Widget

'Recent Posts' or 'Popular Posts' widget is very essential widget for both personal and professional blogs. This widget gives information about your popular blog posts to your readers. So you should look after this widget very carefully. Also if you provide some style with this widget, your reader will be simply overwhelmed. By default blogger provides some styles for this widget but somehow those are obsolete and unprofessional. You are actually recommended to go through those styles for the first time. If you found those are not suitable for your blog, you can come back to this tutorial. I've written few posts about customization of this widget. You can also check those out in my blog in case you're interested. This tutorial will show you how to display popular posts in horizontally rather than vertically. Only problem is 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.

Features

• Full control over 'Image thumbnail' view.
• Full control over 'Snippet' view.
• A preassigned image will be shown if you've checked 'Show image thumbnail' but unfortunately your post does not contain any.

Screenshot

Popular posts widget screenshot

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

Let's proceed. If your blog already has this widget, jump to step #7 after step #1.

1. Go to 'Blogger' dashboard.
2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
   
3. Click 'Add a Gadget' link as shown in the fig below. A new window will appear that contains list of all available gadgets.
   
4. Scroll down and click on 'Popular Posts' gadget or the '+' icon close to 'Popular Posts' gadget.
   
   

   Add Popular posts widget
5. Configure 'Popular Posts' widget as follows.
   
   • 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 texts along with its title.
   

   Configure Popular posts widget
6. Click 'Save'.
7. Click 'Template' from left navigation menu and then click 'Edit HTML'.
   
8. Search for (Ctrl+f) </b:skin> and paste the following before </b:skin>.

/* ---------- Popular Post by Bloganalyzer ----------- */
.PopularPosts li {
  display: inline;
  list-style: none;
  width: 200px;
  height: 150px;
  float: left;
  text-align: justify;
  background: #e4e4e4;
  border: 1px solid #333;
  color: #111;
  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;
}

9. Click on 'Jump to widget' and select 'PopularPosts1' from the drop down menu. Alternately you can search for (Ctrl+f) Show snippets and thumbnails. You'll find a code similar to the following.

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

10. Replace that with the following snippet of code.

<!-- (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/AVvXsEivxwYt82nXKEq-b3wsW0JJnem6bzjJ-zMMjQQDBviK2MnNbzSoy0KJhDL0OFbB-2Xya7Hgn3n4adlhTxvDGHKPRA4v8D4DwHikFBnbuqRMEzDXDhpakLw-6e_z2PBEkGNR2KDfZH3s4g/s400/noimage.png'/>
      </div>
    </b:if>
    <div class='item-snippet'><data:post.snippet/></div>
  </div>

11. Click 'Save template'.

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