Adding Read More With Thumbnail To Blogger

A good advantage of having an automatic read more on your blog is that it will make your blog load faster by showing few post (5-6 posts) only instead of the full post on the homepage since it is the most  important part of your blog.  We can put some  set of codes in order to apply that  automatic read more to your blog

Automatic read more for blogger posts can be done by inputting some code into your blog templates.

Adding Read More With Thumbnail To Blogger

Step 1. Go to Blogger Dashboard >> Lay-out >> Edit HTML
Step 2. Click on "Expand Widget Templates" at the top right hand corner of your  Blogger Template page
Step 3. Just after/below  ]]></b:skin> copy paste the code below,

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Step 5. Now find this code  <data:post.body/>

Step 6. And just after <data:post.body/> add the code below,

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>

 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='text -align: right;'> Read More-- &gt;&gt;</div></a>
</b:if>
<!--READ-MORE-STOPS-->

Short Customization:

1. You can replace the text in blue with anything you like, e.g: Continue Reading, Keep Reading, Read More To Download
2. Replace also the text in pink if you want to  shift or transfer the " Read More" from right to left

Step 4. Save your template and you are Done! Enjoy your day friend!!!
Credits goes to My bloggertricks with some modification from me.