Make Blogger Post Thumbnail and Summary on Homepage

By default Blogger homepage on your blog show full article about your posting, even you already limited how many post will showing, it look long and very long article display on your homepage, except if you set only one post display there, to solve this you need make Blogger post thumbnail and summary on homepage, with so your homepage will have a nice looking with 'Read More' button to click full article.

To do that things above you must login to your Blogger Dashboard, then go to Template menu and click Edit HTML, scroll down and find  ]]></b:skin>, above it copy this code below:

.box-readmore{text-align:right}
a.readmore{padding:4px 15px;text-decoration:none;font-size:14px;background:#666 url() left top repeat-x;border:0px solid #CAC4C4;color:#fff;-moz-border-radius:04px; -khtml-border-radius:04px;left top repeat-x}
a.readmore:hover{background:#222 url() left top repeat-x;border:0px solid #3F7B84;color:#FFF}

Now you have find this code: </head>, above it copy and paste this code below:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 350;
img_thumb_height = 120;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
    //<![CDATA[
    function HTMLtagdrop(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 ThumbnailSummary(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>' + HTMLtagdrop(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
</script>

Last move is find : <data:post.body/>, you will found three code like that, on second code which your found, replace with this code below, or sometimes you have replace the third one, just preview it first to check you replace correct code:

<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' style='text-align: justify'>
<data:post.body/>
</div>
<script type='text/javascript'>ThumbnailSummary
(&quot;summary<data:post.id/>&quot;);</script>
<div class='box-readmore'>
<a class='readmore' expr:href='data:post.url'>Read More&#187;</a>
</div>
</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>

Just make sure you preview first before save your template to see the correct results as you wish, but if you save it already, you can return to the previous code by pressing crtl-z (undo).

That's it and thank you.