Auto Read More Widget for Blogger

In this article I will show you how to implementing the "auto read more" widget on blogger template. Lest see together...

CSS

Go to Blogger Dashboard >> Template >> Edit HTML and inside the editor Find (CTRL + F  or CMD + F)  </b:skin> Copy the code below right above </b:skin>

.continue-readingnbt {
 background: #EEE;
 background: -moz-linear-gradient(top, #FBFBFB 0%, #E5E5E5 100%);
 background: -webkit-linear-gradient(top, #FBFBFB 0%, #E5E5E5 100%);
 background: linear-gradient(to bottom, #FBFBFB 0%, #E5E5E5 100%);
 display: inline-block;
 float: right;
 padding: 2px 10px;
 color: #555;
 border: 1px solid #CCC;
 border-radius: 4px;
    text-decoration: none !important;
}
.continue-readingnbt:hover {
 border-color: #AAA;
 color: #333;
}
.bjtthumbimg{float:left;margin:0 10px 5px 0;padding:4px;border:0 solid #eee;background:none;width:200px;height:auto;}

Javascript

Find (CTRL + F  or CMD + F) </head> and copy this code right above </head>

<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 150;
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(img.length>=1) { 
      imgtag = '<img src="'+img[0].src+'" style="margin-right:10px;" class="bjtthumbimg"/>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>
<!-- Auto Read More Body Script End -->

Implementation

Find (CTRL + F  or CMD + F) <data:post.body/> and replace with this one

<!-- Auto Read More Body Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
</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>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='float:right;padding-right:0;margin-top:5px;'>
<a class='continue-readingnbt' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->

Customization

• Change default Read More text to another on replace this with your text
• Change the number of characters shown when there is no thumbnail, modify the (summary_noimg  = 300;) value 300 to your value
• Change the number of characters shown when a post has a thumbnail, modify the (summary_img = 200;) value 200 to your value
• Change image/thumbnail height, modify the (img_thumb_height = 220;) value 160 to your image height 
• Change image/thumbnail width, modify the (img_thumb_width = 300;) value 180 to your image width 

Click on the Save and Go to your Blog to see the effect