Auto “Read More” Links With Thumbnails for Blogger Posts.

Making the post to smaller length with thumbnail and snippet,and other half of the post is seen by clicking on the read more button link on the home page.This read more link looks attractive look on the homepage and also make home page clean and intense to see full post.Many of the websites follow this read more links on their posts.

PART1

1.Log in to Blogger account.

2.Go to Template->>Edit Html.

3.Back up your template.

4.Tick at Expand Widgets.

5.Search The </head> code using Ctrl+F

6.Add below code after </head>

<!-- 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>
<!-- Auto read more script End -->

7.Now find this line <data:post.body/>

8.Replace <data:post.body/> with this below code.

<!-- Auto read more Start -->
<!-- http://www.Bloggertipsandtricks.in -->
<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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBGXlYdI6BJR2oEiconOU6sLIXM61EKIyTUar4Ap8dLXy-sh31cPZaGayLYwEoiembAhnrq4D_owflrsyHpK-HUvJtCRR2IGohBWMTJXCP4Yz-1k2YKXNMyn6vguKQBtllIGV_AGX7eaZ/s300/read+more+link.png”></a>
</b:if>
</b:if>
<!-- Auto read more End -->

9.Save template and you done successfully.