Automatic Read More Hack For Blogger

Although this tutorial will allow you to truncate the post wherever you want (i.e. you can show/hide several parts of the post with this hack), but being a javascript based hack, this method is not SEO friendly. If you want to use a SEO friendly post-truncating method on your blog, then kindly read this post.

---

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.

NOTE: In the previous "Read More" hack, you have the control over your posts (to hide/truncate different posts at different lengths). But once you apply this hack, all your posts will be of equal length.

Instructions to follow:

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 type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>

You may change the numbers in blue, as per your wish. If a post doesn't have images then the length of the summary will be 500.
If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:
width= 120, and
height= 100.

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 == "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 class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>

Save the template and make your readers and search bots happy !

---

NOTE: Although the JavaScript file has already been uploaded and linked in the code in STEP #1, but as a backup I suggest you to download and save a copy of it:

BackUp - STEP 1:
Download this file: read-more_auto.js

Download Link

BackUp - STEP 2:
Upload the file to
MyDataNest (Recommended),
NOTE: Edit & save the folder properties at your MyDataNest account as "Hidden" and NOT as "Private".
And copy the DIRECT LINK to the file.

Credits: VietWebGuide