Blogger Auto Read more with thumbnail not JavaScipt

Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”. Not too long ago I wrote a tutorial on how to make a “conventional” read more, this time around we will make an auto read more with thumbnail. Before we go on, let me highlight the differences between conventional and auto read more.
(Blogger’s own read more -the jump break, can be classified as conventional read more) 


Set 1: Backup teamplate:

This is an importion step!

Go to Dashboard > Design > Edit HTML

tick on "Expand widget templates " then backup Your Teamplate.

Set 2: Insert Code new! DO

After that, find this line: <data:post.body/>
Replace the line with this 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 3: Config CSS:
Find this line: </b:skin>
Replace the line with this code:

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

Now ẹnjoy!