How Add Read More Button To Short Posts On Main Page

hello friend in modern templates this function is already enabled if not in your templates then follow instruction

read more button is used to short your posts on main page to showing full posts

post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.

This is automatic read more function with thumbnail. We just need to set up our HTML code.

Follow This instruction or Setup

1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code
<data:post.body/>
4. Replace  this with code below
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<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> <div class='readmorecontent'><a class='readmore' expr:href='data:post.url'>Read More &#187;</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
5. Now, search for </head> and paste the following section of code immediately before it:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

clarification code of  above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width 

  

You can change Read More with your own word 

If You Want Posts Open in New Window than change here show in red 

replace this with

<div class='readmorecontent'><a class='readmore' expr:href='data:post.url' Target ="Blank">Read More &#187;</a></div>