Adding Read More Link To Blogger With Thumbnail

Hey guys after a long time of editing my blog template i am back. Today when i was surfing through internet i found a nice tool for blogger and that was auto read more link. Simply we can recognize it as a tool that shortens your post. But with this post you will be able to add read more link with thumbnail.
The first picture of each post will be taken as thumbnail. Here is a  model of it;

Here thumbnail is kept at left side. The size of picture is converted first and then displayed.
By the help of auto read more link you will be able to make your site load faster. Due to this the whole post shouldn't be shown and a partial part of post is shown which makes the time of displaying less.
At the end of each partial post there would be a phrase "read more" or "see more". We can keep any words as our wish. By clicking on it users will be able to jump to the specific (targeted) post. 
This widget uses Javascript. You may think your post will be affected but it is not so. It doesn't have a glimpse in a single post of yours. It is seen in posts without thumbnail also. When there is no image then instead of image partial part of post covers it. So there is no exception. So isn't it a terrific tool. If you are impressed with it then read the tutorial below and if not then for the sake of test i recommend you to use this tool at least once as it helps in the development of your SEO also.
ADDING AUTO READ MORE LINK:
Without delay let's go;

• Sign in to your blogger account.
• Be forwarded to dashboard>design>edit html.
• Be sure to tick the Expand Widget Template box.
• After you ticked the box search for this tag;

</head>

• After you found the tag paste the below code just after it;

<!-- 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>
<!-- Auto read more script End -->

• After adding the above code search for this one;

<data:post.body/>

• After you found this code replace with the code below;

<!-- Auto read more Start -->
<!-- http://www.BloggingSentral.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Note: You may find <data:post.body/> two or three. At the time try the first one. I have found this tip working 95%.

• Preview it and if you are satisfied then click on save template.

Tips:

1. You can change the phrase Read More.. bolded and italicized above to any word or phrase you want.
2. You can change img_thumb_height  value and img_thumb_width  value. Be sure to change the height or width in pixels.

• ENJOY!!

If you have any problems feel free to comment below.