How To Add Auto ‘Read More’ Feature with Thumbnails to your blog

Blogs with thumbnails in the first page or the home page looks good and makes you show more posts with summary on your home page. These type of blogs can showcase more posts to your visitors which will engage your visitor in your blog for more time. The posts on your blog will shown up on your homepage as a summary and followed by a 'Read More' link. When the visitor clicks on the 'Read More' link, he will be taken to the actual or descriptive post. It makes your blog more informative and interactive. I have penned down a small trick using which you will be able to make your blog to show up 'Read More' links on every post of your homepage. It also enhances the look of the homepage of your blog. Just follow these steps to apply it on your blog.

Step 1: Sign in to your Blogger account and on your Dashboard, Go to "Template".
Step 2: Then Click on "Edit HTML" and the new HTML editor will be shown.
Step 3: Click on "Expand Widget Templates" to expand the xml code.
Step 4: Scroll down to where you see </head>tag or simply press Ctrl+f and enter </head> to the searchbox to get it instantly.
Step 5: Now add below code just before the </head> tag.

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</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(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>

Note : You can change below values as your choice.

summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.

Step 6: Now Scroll down to where you see the following or press Ctrl+f and enter the following line in the search box: <data:post.body/>
Step 7: Replace above code with below code.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Step 8: Save your template and no more work. You are done. If you like the post, please add a link to our blog from your site. Just add an HTML/Javascript widget anywhere in your blog Layout and copy and paste the following code to the widget window, then save the template.

 
<a href="http://learnatleisure.blogspot.com" target="blank"><b><u>Get informative Contents here</b></u></a>

Thanks a lot. Happy blogging. :)