Blogger Hack : Add the read more for your posts

With this trick, you can choose to display an arbitrary amount of text from
the beginning of each post, as a teaser for the whole thing. Then users who want
to read the rest of the post can click a link to see the full text. This is
handy if you have lots of long articles all on one page. Note that you'll need
to have post pages enabled in order to make this feature work.

There are three ingredients that go into this feature: conditional CSS, a "read
more" link for each post, and a modification for the posts that use this feature.
So let's go through it step by step.

Conditional CSS

We're going to use conditional tags to change how posts display on different
pages. Add the following code to your style sheet, depending on what kind of
template you have:

(for classic templates)

<MainOrArchivePage>
 span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
 span.fullpost {display:inline;}
</ItemPage>

(for layouts)

<b:if cond='data:blog.pageType == "item"'>
 span.fullpost {display:inline;}
<b:else/>
 span.fullpost {display:none;}
</b:if>

Your style sheet is usually near the top of your template, between the
<style> and </style> tags. If you have your style sheet in a
separate file, you'll still need to add these lines in your template, so the
conditional tags will work. Just make sure you add in the <style>
tags around them.

What we did here was to define a class called "fullpost" that will appear
only on post pages (permalinks). Part of each post will use this class, as we'll
see later.

"Read More" Links

Add the following code to your template, somewhere after the <$BlogItemBody$>
or <data:post.body/> tag:

(for classic templates)

<MainOrArchivePage><br />
 <a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

(for layouts)

<b:if cond='data:blog.pageType != "item"'><br />
 <a expr:href='data:post.url'>Read more!</a>
</b:if>

This link will only appear on the main page and archive pages, and it will
redirect your reader to the post page containing the full text of your post. You
can replace the "Read more!" text with whatever you like, of course.

Post Modifications

The final piece that we need is a little bit of code in your actual post.
Each post that you want to use this feature on will need this code:

<span class="fullpost"></span>

This part can actually go in the
post template, if
you don't want to have to type it for each post. You'll enter the summary text
outside the span tags and the remainder inside, like so:

Here is the beginning of my post. <span class="fullpost">And here is
the rest of it.</span>