Create Post Summary and Thumbnails Widget in Blogger

Here is the step by step for creating easy Post Summaries and Thumbnails for Blogger Blogs.

Step 1: Log in Blogger Dashboard

Step 2: Go to Design--> Edit HTML

Step 3: Click on "Expand Template"

Step 4: Look for the below mentioned code.

<data:post.body />

Step 5: Replace the above code with below mentioned 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>

Step 6: Now look for the following line. </b:skin>

Step 7: Paste the mentioned code before the line mentioned in step 6.

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

  Step 8: Save your template and done.

Image may be subjected to copyright