Automatic Post Summaries for Blogger with Thumbnails

Fri, Apr 13, 2012, by useless

Blogging

Wordpress users might have seen the Wordpress excerpt thing, which displays a summary of your post. Now we have something similar for blogger.Actually I should say it is really amazing..This hack will automatically create post summaries with thumbnails.. you needn’t need to add any extra code in every BlogSpot that you make..These summaries will be displayed on all pages other than the post page..Here in my blog I am using a modified version of the same which displays summaries on pages other than the post page and homepage.Check out some of my labels to see the hack in action..

First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..

First of all Edit your blogger template

Find this code

</head>

and replace it with

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
</b:if>
</b:if>
</head>

Off course you can edit these parameters..

Now Find

<data:post.body/>

Replace it with

<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>
<div style=’clear: both;’/>
<span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.canonicalUrl’ rel=’bookmark’><b>Read more >></b></a></span>
</b:if>
</b:if>