Blogger Auto Read more with thumbnail

Blogger Auto Read more with thumbnail

Expandable post or popularity known as "readmore" Is a feature that make your blog only a part of your post on index pages i.e. home, labels and Archive pages. At the end of each preview therewill be a link to post page, usually Attached to the Pharse "Read more" Not too long long go I wrotea tutorial on to make a "conventional" read more, this time around we will make an auto readmore with thumbnail.before we go on, let me highlight the differences between Conventional and Auto Read more.
(Blogger's own read more-the jump break,can classified as conventional read more)

Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

Applying Auto Readmore
Here We go:
01 - Login Blogger Account.
02 - Go to Dashboard>Design>Html.
03 - Back up ur template.
04 - Check the Expand widget template Check box on the top right of html window.
05 - In the code window look for </head> line
06 - Add Read more Code below right after that line
To Copy code,Click <> icon on the Right :

    <!-- Auto read more script Start -->
    <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 -->

07 - After that,find this line:<data:post.body/>
08 - Replace the line with this code:

To Copy code, Click <> icon on the right :

<!-- Auto read more Start -->
    <!-- http://www.BloggerSentral.com -->
    <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'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Read more ...</a>
    </b:if>
    </b:if>
    <!-- Auto read more End -->

09 - Click Preview.If it works, then Click Save Template.
10 - That's it , Enjoy!