Auto Post Summary Widget with Thumbnail for Blogger

There are a lot of benefits to include auto summary widgets in blogger blogs. If you notice many websites or blogs (in fact all) starts to use the auto read more scripts. The main benefit is that your blog will load faster and allow you to display more posting. It looks neater and your readers can also surf your blog with more ease and this will want to make them to return more often. It is definitely a plus recommended by most webmasters.

Recently Blogger introduce the read more hack to Blogger templates. You can include the ‘Read More’ in any part of your posting. However, this add on by Blogger does not automatic generate a thumbnail and you have to add them manually. Click here to find out more about this add on by Blogger.

If you want an advance automatic post summary ‘Read More’ hack that automatically generate a thumbnail, use the below hack instead.

First of all I would like to credit this hack to Bloggerplugins.org, where I got the original script from.

Method
Log in to your Blogger’s dashboard, click on ‘LAYOUT’ tab and click on ‘EDIT HTML’. Tick the checkbox to ‘EXPAND WIDGET TEMPLATES’.

Backup and save a copy of your template before you do any adjustment.

Search for this line:

</head>

And replace it with:

<style>
#readmore
{
width:100px;
margin:3px;
background:#000 url() repeat-x center left;
color:#fff;
border:1px ridge #eee;
text-align:center;
cursor:pointer;
}
</style>
<script type='text/javascript'>
var thumbnail_mode="float" ;
summary_noimg=300;
summary_img=300;
img_thumb_height=150;
img_thumb_width=150;
</script>
<script src='http://kingofcomplain.googlecode.com/files/AutoSummaryPlugin.js' type='text/javascript'/>
</head>

Search for this line:

<data:post.body/>

And replace 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.url' rel='bookmark'><div id="readmore">Read more >></div></a></span>
</b:if>
</b:if>

Preview it and CLICK SAVE and you are done.

Customization
You can edit the word count for these var/parameters:
summary_noimg=300; (Word Count with No Image)
summary_img=300; (Word Count with Image)
img_thumb_height=150; (Thumbnail Height)
img_thumb_width=150; (Thumbnail Width)

You can customize the 'Read More' button by changing the style. However if you do not want any style but rather just the simple 'Read More' text link removes this section of the above code:

<style>
#readmore
{
width:100px;
margin:3px;
background:#000 url() repeat-x center left;
color:#fff;
border:1px ridge #eee;
text-align:center;
cursor:pointer;
}
</style>

Have fun Blogging.

Credit:
Bloggerplugins.org

Link To This Complain:
<a href="http://kingofcomplain.blogspot.com/2010/04/auto-post-summary-widget-with-thumbnail.html" target="_blank" rel="dofollow">Auto Post Summary Widget with Thumbnail for Blogger</a>