Show Posts with Thumbnail and Read More in Blog

Show summary of Posts with a thumbnail in Blog homepage in three simple steps.

Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).

Now, goto Template>select Backup/Restore>save the .xml file

Step 2:

• Go to Template>Edit HTML

• Check the Expand widget templates 

• Copy and Paste following code before

</header>

<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 = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(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.innerHTML = summary;
}
//]]>
</script>

Step 3:
Search for first occurrence of code

<data:post.body/>

Now, replace this line with the following code:

<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'> PostSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>