How to add Read More with Thumbnails in Blogger

Read More hack is now became an essential thing for a Blog. It makes a Blog look like professional Website. in older times, all posts are crowded on the home pages. But using this hack, you can make your homepage cute and professional looking. It will an Image thumbnail and summary of the content. Thus, the readers are just look at summary and understand whether it suits for them. You can also edit the thumbnail image size, summary length etc.

For implement Auto read more hack in Blogger blogs, Just follow simple steps given below:-

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML
Back up template by just clicking Download Full Template.
Check Expand widget template Given on top right hand side.
Find </head> code in given HTML of template by just pressing Ctrl+F

Paste code given below </head> found in above step.

<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 –>

Next find this line

<data:post.body/>

Replace the above line of code with the text given below:-

<b:if cond='data:blog.pageType == "item"'>

    <data:post.body/>

    <b:else/>

    <b:if cond='data:blog.pageType == "static_page"'>

    <data:post.body/>

    <b:else/>

    <div expr:id='"summary" + data:post.id'><data:post.body/></div>

    <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");

    </script>

    <a class='more' expr:href='data:post.url'>Read more ...</a>

    </b:if>

    </b:if>

    <!-- Auto read more End –>

Now, click on Save Template and see the changes

You can also change the default values of summary length, image size etc. by changing the following variables in the above code

summary_noimg- You can specify the number of character including spaces which you want to show in post summary on homepage whenever any thumbnail image is not available in post.

img_thumb_height and img_thumb_width- You can specify height and width of Thumbnail image shown in the post summary.

summary_img- You can specify number of characters including spaces which you want to be shown in post summary whenever thumbnail image is available in post.

thumbnail_mode- Select Yes if you want to display Thumbnail image along with text summary. Select No if you want to show only text in the summary.

If you want, you can also customize the Read More Text by Applying an effect for it or replacing it with an image. For that, read my post

Customize Blogger "Read More" or Jump Break with Images or Text [with Alignment]