how to add Read More With Thumbnail For 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".

Auto read more functions automatically shorten your post and create a thumbnail of an image which is present in the post. It also helps to load page faster. It also shows and image thumbnails which helps to attract the readers. I have also added the auto read more to my blog. Automatic read more for blogger with thumbnail posts can be done by inputting some code into your blog templates.

How To Add Auto Read More With Thumbnail To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Check "Expand Widget Templates".
3. Find (Ctrl + F) </head> tag
4. Copy and paste below code just before/above </head> tag.

<!-- B2W Auto Read More Script Start -->
<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>
<!-- B2W Auto Read More Script End -->

Note: You can customize the read more by changing the values of the variables below:

• thumbnail_mode – set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
• summary_img – specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
• summary_noimg – specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
• img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).

5. Now find (Ctrl + F) <data:post.body/> and replace it with below code.

<!-- B2W Auto Read More Start -->
<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>
<!-- B2W Auto Read More End -->

Note: You can change the words "Read More >>" with your own by changing it in the code.

6. Now save it.

That's it, enjoy! If it doesn't works for you then mention it in comments. I'll glad to help you.