How to create "Read more" on your blog?

This read more are quite high demand for new blogger. This trick can save your space for viewer pleasure. Because long articles can be shown only for a few first paragraph and if the viewer interested to read more they can open the link and continue reading on their pleasure.

1. Go to Design
2. Give a check on "Expand Widget Templates"
3. Find code </head> and then put following script exactly above it.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;
summary_img = 325;
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>

4. Still in Edit HTML Page, find another code <data:post.body/> or <p><data:post.body/></p> and then replace with following script code:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right; '>
<a expr:href='data:post.url'>&#187;&#187; Readmore </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

5. Save template and see the result.

Good luck and enjoy your blogging time :-)