Blogger (classic template) Expandable Post Summary

UPDATE: 22 July 2008: For New Blogger XML template, refer to Expandable post summary for New Blogger.

UPDATE 2: Blogger has implemented expandable post summary which they call JUMP BREAK. More details at Blogger Buzz: You might as well jump

What is Expandable Post Summary?

You may be in the habit of creating long posts, and your readers have to scroll and scroll to get to the next post in the main or archive section. You don't want that. You want only to have the first few lines of the post visible, followed by a READ MORE hyperlink that takes you to the full post. That is expandable post summary.

How to do expandable post summary for Blogger

First, you have to ensure that you have POST PAGE enabled. Go to SETTINGS > ARCHIVING and make sure that ENABLE POST PAGES? is set to YES. Then paste the following codes into your CSS (Cascading Style Sheet. It will be the section between the <style> and the </style> tags in beginning of your template.) (Important note: It is always advisable to backup the template before you do any modification to it.)

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

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

Then add the following codes in the template just after the <$BlogItemBody$> tag

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

You can replace the anchor text Read more! with Read the rest of the post... or whatever you fancy.

The next thing you have to do is to place some pieces of codes in your post. Put the tag <span class="fullpost"> at the spot where you want your long post to be truncated, then type in the rest of the post. At the end of the post, add the tag </span>. Thus your post may be typed as follows:

This is the beginning of a long post, which is truncated here. <span class="fullpost"> This is the rest of the long, long post. </span>

If you don't want to have to type in the codes by hand each time you do a post, you can add the codes in the post template by going to SETTINGS > FORMATTING and at the bottom of the page, in the POST TEMPLATE box, add in the codes <span class="fullpost"></span>. Just make sure that the text are typed in the proper place.