how to install read more on the blog automatically

Readmore function / read more on the post is to save the front page of the website / blog for not too long, but it also can stimulate the viewer to read one post on the front page of the website / blog.

Before you start installing automatic readmore on blogspot / blogger, it's good to note the following:

• Download and save your templates first, because if the installation fails you can still restore your blog like the original;
• Do not forget to check the writing Expand widget templates;
• To facilitate the search code, use the Find button, the way in your browser click on the Edit menu and select Find or through your computer keyboard, press Ctrl + F, then copy and paste the code would look into the Find box then Enter / Next;
•  This is the most important, if you have previously used Readmore old version, then delete the old code.

The step by step How to Install Automatic Readmore are as follows:

• Log in to your Blogger account;
• Go to the Edit HTML page, then the above code </ head> put the script below: 

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>

• Find and replace the code <data:post.body/> with all the code below:  

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

• Save / Save Template, finished.

Description: 

We can determine the position of tumbnail (picture), the number of characters either without or with tumbnail and the height and width tumbnail on the post by changing the thick red code above and the following explanation: 

• var thumbnail_mode = "float";: Location of the thumbnail is in the "float" left or if not, please replace the "no-float";
• summary_noimg = 250;: Number of characters to be displayed in the post without a picture / thumbnail;
• summary_img = 250;: Number of characters to be displayed on the posts with image / thumbnail;
• img_thumb_height = 120;: High thumbnail in the size of pixels;
• img_thumb_width = 120;: thumbnail width in pixel size;
• Readmore-<data:post.title/>: Writing Readmore can be replaced for example with "Read More" and if you do not want to display the titles behind Readmore, you can delete this script code <data:post.title/>.

Good luck