Auto Read More With Thumbnail For Blogspot Blogs

Normally, A read more button becomes visible in your blog's homepage when you add a jump break to your posts.

When posting an article from your blogger admin panel, you have the option of  adding jumpbreak any where you want by just clicking the jumpbreak button but when using an application, you have to manually add the <!--more--> functionality to your post's html ...

Most times we get too Lazy to click on the jumpbreak button or add the !more functionality and for that reason, we need an automated helper...

This auto read more functionality is highly customizable to your taste and you don't have to be left hanging out with a boring read more button because you are going to have absolute control over whatever phrase or word you wish to use directly from your blogger admin panel.

Now to begin adding auto read more functionality to your, back up your template.

You should always backup your blog template before tweaking... you might want to revert back to the old looks. 

From your Blogger dashboard, go to Template and click on the Edit HTML button and search for </head>.

Just above  </head>, paste the code below

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //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 = 400;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTagundefinedstrx,chop){
 ifundefinedstrx.indexOfundefined"<")!=-1)
 {
  var s = strx.splitundefined"<");
  forundefinedvar i=0;i<s.length;i  ){
   ifundefineds[i].indexOfundefined">")!=-1){
    s[i] = s[i].substringundefineds[i].indexOfundefined">") 1,s[i].length);
   }
  }
  strx =  s.joinundefined"");
 }
 chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
 whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop  ;
 strx = strx.substringundefined0,chop-1);
 return strx '...';
}
function createSummaryAndThumbundefinedpID){
 var div = document.getElementByIdundefinedpID);
 var imgtag = "";
 var img = div.getElementsByTagNameundefined"img");
 var summ = summary_noimg;
        ifundefinedthumbnail_mode == "yes") {
 ifundefinedimg.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>'   removeHtmlTagundefineddiv.innerHTML,summ)   '</div>';
 div.innerHTML = summary;
}
//]]>
</script> 

once you've pasted the code above, search for 

<data:post.body/>

if you are using the default blogger template, you will find the code above twice but there may be more. 

this is what the second occurrence looks like. 

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

    <b:if cond='data:post.hasJumpLink'>

      <div class='jump-link'>

        <a expr:href='data:post.url &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

      </div>

    </b:if>

so you are to replace the <data:post.body/> in that code with the code below... 

<!-- Auto read more Start -->
<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'> createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'><b><div class='jump-link'><data:post.jumpText/></div></b></a>
</b:if>
</b:if>
<!-- Auto read more End -->

after you've successfully replaced the code, you can delete 

<b:if cond='data:post.hasJumpLink'>      <div class='jump-link'>        <a expr:href='data:post.url &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>      </div>    </b:if>