Codes for blogger post summaries and thumbnails

If you want to keep summaries of your blog post on the main page instead of entire blog post then my coding suggestions will be very helpful for you. Actually post summary and thumbnails make your blog more attractive and user friendly. It also boosts the traffic of your blog. So follow these steps and you will get a new attractive look for your blog:

1. First of all back up your template because if anything goes wrong you will be able to recover it. For this sign in to your blogger dashboard  --> Template. Then backup/restore your template. After that download the xml file. For emergency case if you do anything wrong then you can restore your template after uploading this XML file.
2. After downloading go to Edit HTML --> proceed

Click on “expand widget templates”. Copy the code and paste in WordPad. After that, search for <data:post.body/> .you will find two result. 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>

3. paste it in the template . Now preview the template . If you see snippet and thumbnail, then it’s ok.
4. Now add css to align the thumbnails. Search for  </b:skin>     in the template code and immediately before the tag paste the following code:

.thumb img {

  float: left;

  margin: 0 10px 10px 0;

}

Now again preview, you will see aligned thumbnails. If you want to align the thumbnails to the right side then you can paste the following code instead of previous one.

.thumb img {

  float: right;

  margin: 0 0 10px 10px;

}

5. Now save the template. 

Now if you want to increase the font sizes of text them again go to template --> customize --> advanced. Then you change the PAGE TEXT font size.

Now enjoy the new look of your blog.