how to make automatic read more

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).

Read More Hack For Blogger

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 = "no-float" ;
    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 !

G-Leaves