How to Add Post Summaries With Thumbnail in Blogger Blog

In previous posts i have explained about ‘Expandable post summaries using javascript’ and simple expandable post summaries.

Those Read More! hack have some drawbacks like –
* No thumbnail created
* Need manual setup – If you already have some posts in your blog and going to use those hacks, than you need to alter all the post manually. This is the big drawback
* Later one is quite similar to this hack but that will not create thumbnail and you don’t have control on the post summary content.

For these reason this is the hack for you. After implementing this hack in your blog, all the posts will automatically display post summaries in the home page.

Below is the snapshot how the post summary and the thumbnail is created and displayed.

How to setup :

1. Login to Blogger Dashboard

2. Go to Design >> Edit HTML >> Check ‘Expand Widget Templates’

3. Now find </head>

4. Replace it with following code.

<script type='text/javascript'>  
var thumbnail_mode = &quot;float&quot; ;    
summary_noimg = 250;     
summary_img = 140;    
img_thumb_height = 100;     
img_thumb_width = 100;   
</script>    
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>    
</head>

5. Now find <data:post.body/>

6. Replace it with 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'>     
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);     
</script>     
<div style='clear: both;'/>     
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>     
</b:if>    
</b:if> 

Customizing :

summary_noimg = 250;
This is the number of characters shown if the post does not contain any image.

summary_img = 140;
This is the number of characters shown if the post contains image.

img_thumb_height = 100;
Height of the thumbnail created.

img_thumb_width = 100;
Width of the thumbnail created.

You are done. Now all the post should contain thumbnail and the post summaries in the home page or in the post pages.