Make a Read More Function (with Thumbnail)

How to make Automatic Read more Function with Thumbnail in blogspot?  it's easy. The Image in your post will automatically used as thumbnail Image. All this work is done with the script automatically. 

Let's start with it's  Installation :

1. Login into your blogger Dashboard >> Layout >> Edit HTML >> Check the " Expand Widget Templates " 
2. Find the Code </head> tag in your blog templates, and paste the following section code before it.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
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 = summary_noimg;
    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>

   
3. Note :
   in above codes we can change the numeric numbers according to our need
   
   
   
   
   
   summary_noimg = 430; is post cut height without image 
   summary_img = 340; is post cut height with image 
   img_thumb_height = 100;  is thumbnail image height 
   img_thumb_width = 120; is thumbnail image width 
   
   
4. Now find this code in your template and replace it with below codes.
   
   
   
   
   

   <b:if cond='data:blog.pageType != "item"'>
   
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb

   ("summary<data:post.id/>");
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'><a
   expr:href='data:post.url'> read more
   "<data:post.title/>"</a></span>
   
   </b:if>
   <b:if cond='data:blog.pageType == "item"'>

   <data:post.body/></b:if>

Preview Your template if its showing thumbnail with read more hack Save it.

To show thumbnail it should have one image in your blogger posts and please upload the .js   file to your server and dont forget to change the link with yours in codes to make this hack work.

I am sure everybody will love this hack for sure