How to add auto read more option in blog?

Auto Readmore option to blog or websites

Why to prefer auto read more to blog or website?

In blog all the posts are displayed in home page itself if the user enter so all informations and blog artciles are displayed directly,so the blog wont get any pageloads,but it looks nice if normal blog apperance as most premium websites aricles are using this trick to attract and gain pageloads from their visitors.

How it appears in blog?

It appears as above image appears.

What difference between read more and auto read more in blog?

Read more:

1. The code should be used in every post of the blog.
2. summaries must given by the poster for every post in blog.
3. It is of HTML codes.

Auto read more:

1. The code (script) should be used only once in blog or website.
2. Auto summary enhance as it automaticaly creates the summaries to blog.
3. It is of javascript.

How to do it for blog?

1.Login to your blog.

2.click Template-->proceed buttons.

3.Now press CTRL+F to open search box.

4.Then search for </head> tag.

5.Then just after that tag add the below code.

<!-- www.blog4al.com 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>
<!-- www.blog4al.com Auto read more script End -->

6.Then find

<data:post.body/>

7.Replace the above tag with below code.If you find more than one tag (for modern templates)but you just replace the first code with below code.

<!--www.blog4al.com  Auto read more Start -->
<b:if cond="data:blog.pageType == "item"">
<data:post .body=".body">
<b:else>
<b:if cond="data:blog.pageType == "static_page"">
<data:post .body=".body">
<b:else>
<div expr:id=""summary" + data:post.id">
<data:post .body=".body"></data:post></div>
<script type="text/javascript"> 
createSummaryAndThumb
("summary<data:post.id/>");
</script>
<a class="more" expr:href="data:post.url" 
href="http://www.blogger.com/blogger.g?blogID=3505824197937252492">
Read more ...</a>
</b:else></data:post></b:if>
</b:else></data:post></b:if>
<!-- www.blog4al.com Auto read more End -->

8.Then click preview to check.(it will work 100%).
9.Then click save.
You can customize the read more by changing the values of the variables below:
1.thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
2.summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
3.summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
4.img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
You can change the words “Read more” with your own by changing it in line 12 of hthe code above step 8.

Thats all you have done.