Blogger Posts with Automatic Thumbnail and Summary

Blogger Posts with Automatic Thumbnail and Summary is a great blogger hack by BloggerBuster. This hack allow you to show a brief summary of your blogger post and add thumbnail if their is any in the post to the left of the summary. It is a very easy hack to implement and doesn't require any use of JavaScript. An advantage of this can be that it will allow you to show more post in your post body and takes up less space. This might increase your blog's traffic because your viewer see more post and they might find interesting. It is also very Search engine friendly.



Step 1 - Back up your template before making any edits to your template. [To back up your Blogger template, go to Design -> Edit HTML and click the Download Full Template link near the top of the page.]

Step 2 - To add the code to display summaries and thumbnails, Go to Design -> Edit HTML, Check the Expand widget templates box and look for the code below(ctrl + f):

<data:post.body/>

Step 3 - Next Copy the code below and replace it with the code above.

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

At this point, you can preview your blog and save it without adding the CSS  if you want, or continue to read if you want to add CSS.

Step 4 - To Add the CSS, look for (ctrl + f):

</b:skin>

 Step 5 - Add the following code above </b:skin>

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

[NOTE: You can either float the image to left or right]