Auto Read More with Small thumbnail without Javascript for Blogger Posts

Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the post but the content is still downloading in browser. If you want to check go to any blogger theme, disable the JavaScript and refresh the page, you can see all the content in the browser.
Author: technohalf
Source: technohalf
But there is a method to use Read More tags using blogger Layout tags. Using this techniques Page will load very fast. Before we get started your first thing need to make sure that you have backup your blogger template
Step 1: Login to your blog >> Go to Template  >> Click "Edit HTML" Button
Step 2: Click on Template Box to Find <data:post.body/> and replace by one of these below provided code
1st-Auto read more with thumbnail:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='thumbnail' expr:alt='data:post.title' itemprop='image' expr:src='data:post.firstImageUrl' expr:title='data:post.title' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2nd-Auto read more with thumbnail and display default images if there is no images in that posts

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='thumbnail' expr:alt='data:post.title' itemprop='image' expr:src='data:post.firstImageUrl' expr:title='data:post.title' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-US46tc7yj4dy7U6UtRniYl5a7FxrTFD1RCi1ccLeeZGWFKx_4AW_Bb6r5q_kmaDmLQ93gcK8_FGbCJDEZaSj8BUsCmPWHNieVjffsKX6802i9vB9uf0IOBB2TPMhevPDCR_Zp9u8j23c/s1600/images9.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Step 3: Now it's time to Customize post image.

•  Display image on left add this before ]]>/b:skin>.or </style> : post-image {float: left; margin-right: 12px}
•  Display image on right add this before ]]></b:skin> or </style> :.post-image {float: right; margin-left: 12px}