Automatic Read More Hack For Blogger

Here's a multi-purpose and quite awaited Blogger Hack.
This is for all those bloggers who are looking for a hack, which adds "Read More..." expandable link automatically to all their posts (whether the posts are new or old).

You have to specify the number of characters after which the post will be truncated. If you select it as 500, then all your posts in the home page will show only first 500 characters.
And moreover this hack has already been modified to show the first image from the post, as a thumbnail along with the truncated post.

I called this hack as multi-purpose, because through this hack you not only add the "Read More" tag to your posts, but it also optimizes your "Archive pages" (Feb 2008, Oct 2008, etc.) for search engines and also for your readers.

STEP 1:
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box.

Now find (CTRL+F) this in the template code:


</head>

And immediately ABOVE/BEFORE that, paste this code:

</script><br /><script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;<br />summary_noimg = 500;<br />summary_img = 450;<br />img_thumb_height = 100;<br />img_thumb_width = 120;<br /></script><br /><script src='http://www.mydatanest.com/files/DeshAmarBD/18856_d3xeo/read-more_auto.js]read-more_auto.js' type='text/javascript'/>

STEP 2:
Now again in the template, find (CTRL+F) this:

<data:post.body/>

Then REPLACE that line, with this code:

<b:if cond='data:blog.pageType != &quot;item&quot;'> <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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Finally save the template and make your readers and search bots happy !