How To Create Auto Read More Link With Thumbnail On Blogger

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”.At the previous post i show you how to add custom read more link on blogger but if you follow these steps your blog will make read more link automatically.

Tip: You can use read more image replacing read more link.

Custom Read More vs Auto Read More

Custom Read More Link	Auto Read More Link
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

How To Apply Auto Read More ?

Step 1: Backup Your Template, Then Go To Blogger > Template > Edit HTML.
Step 2: Tick-mark to Expand Widget Template.
Step 3: In the template code window find </head> [Use Ctrl+F for quick search]
Step 4: Add bellow codes after </head> line.

<!-- Auto read more script Start by MHT -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End by MHT -->

Step 5: Just after that find this <data:post.body/> [Use Ctrl+F for quick search]
Step 6: Now replace that line with bellow codes.

<!-- Auto read more Start by MHT -->
<!-- Script by www.myhowtricks.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End by MHT -->

Preview your blog to see changes, then save your template.

Customize Code:
You can customize the read more link by following these steps bellow.

Replace summary_noimg = 430; and summary_img = 340; with your custom custom summary length which you want to show.
Replace img_thumb_height = 200; and img_thumb_width = 200; with your custom image size.