Automatic Read More feature for Blog Posts

This feature is useful for blogging. The blog loading time is reduce and the visitor is reading the some text from the post.
In the Blogger, default feature of Read More... was added. It's called Jump break. But, the blogger (or) Author is adding that by manual. So, this is a knotty problem for Author.
In this post, I share :) How to make posts in the blog homepage to be displayed with an automatic "read more" button and a thumbnail.
My network connection is very slow. So I directly share the screen shoot and code from Helplogger. (Helplogger is very useful blog for my learning.)
OK, start the work!

Step 1. 

From your Blogger dashboard, go to Template and click on the Edit HTML button:
(Oh! ... I advise to Back Up your Template before hit the Edit HTML button.)

Step 2. 

Click anywhere inside the code area, then press the CTRL + F keys and search for this code:

<data:post.body/>

Note: after hitting Enter, you'll find this code more than once but you need to stop at the second one. (When I change my template, I find three times and recode code line number, example: I find first at line no. 1381 , second is find at line no. 1509 and third is find at line no. 1514. So, I decide the line no. 1509.)

Step 3. 

Replace the code above with this one:

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

Step 4. 

Now search for the following tag:

</head>

Step 5. 

Just above the </head> tag, add the following code:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img

src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height

+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Note:

• To change the number of characters shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
• If you want larger thumbnails, modify the values (120) in red.

Step 6. 

Click on the Save template button to save the changes.
This is the finished of my sharing.
If you want to view the orginal post and reading the knowledge of Blogger, Go to Helplogger.
Thank !