How to add ' read more ' plugin to blogger templates

In this tutorial i will explain how to add a summary posts with thumbnails , summarized automatically by adding a ' Read more ' or ' Continue reading ' link below each post

DEMO :

BeforeAfter

1/ Go to blogger dashboard and choose your blog --> click on  ' Template ' --> click on ' Edit HTML' and then click on the ' Expand Widget Templates ' checkBox

2/ Search for <head/> ( Press Ctrl + f from your keyboard )

3/ Now add  before ( above ) </head> tag this code :

<script type='text/javascript'>
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 128;
img_thumb_width = 128;
</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 0px 5px 5px;margin:0 5px 0 0;"><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>

Customize :

summary_noimg = 450; The number of characters that will be displayed when there is no image
summary_img = 400;  The number of characters that will be displayed when there is an image
img_thumb_height = 128; height of the post thumbnails
img_thumb_width = 128;  width of the post thumbnails

* Image floating :


LEFT :

* if you want to add the post thumbnails on the left of the summary , do not change them , keep it

RIGHT :

* if you want to add the post thumbnails on the right of the summary replace the above ( yellow )  code with :

imgtag = '<span 
style="float:right; padding:0px 0px 5px 5px;margin:0 0 0 5px;"><img
 src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>'; 

CENTER :

* if you want to add the post thumbnails on the center of the summary replace the yellow code with :

imgtag = '<div style="clear:both; text-align:center;"><img 
src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></div>';

4/ Now search for <data:post.body/> and replace it with :

( Important Note : If you find more than one , choose the first  )

replace the first <data:post.body/>  with :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <data:post.body/>
<b:else/>
 <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 style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>

Customize : 

Read more...  You can replace it with another word , such as ' Continu reading...' Or with image by replacing Read more... with : <img src="URL-OF-IMAGE"/>  change URL-OF-IMAGE with your image link .

Done , save your template .