Blogger Post Summaries and Thumbnails in 3 Steps

Post summaries and Thumbnails is one of the greatest customization available in blogger.  Without a full post on  your main page you can show different posts summaries and thumbnails. These kind of layouts easily attracts users, which in turn increases your site's traffic.

Steps to Add Blogger Post Summaries and Thubmnails:

1. Back up your template. If anything goes wrong you can restore your old template. Go to your blogger dashboard click on template, then click on edit html and click to proceed. Select Expand Widget template. Now copy the entire code and paste in any text document and save it.

2. Now in template code search for <data:post.body/> you may find 2 results replace first one with the following code.
<b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
Now preview template you will see snippet and thumbnail.

3. Add CSS to align the thumbnail. Search for </b:skin> in template code and immediately before the tag paste following code.
.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

Example Preview 

If you want to align thumbnail image to right paste the following code.
.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

You May Also Like
1. How to Create RSS Feeds for Your Website or Blog?
2. Add Email Subscription to Your Blog or Website
3. Add Custom Search Box to Your Blog or Website
4. Code for Small Pop up Facebook Like Box