How to use "Read more!" links in your blog

Often, we have long posts in our blogs, which make it difficult for readers to scroll through our blog posts. Long posts may also shorten the number of posts that are displayed on the main blog page or push important titles that we want visitors to see far below the bottom of the screen.

This article will show you in a simple, step-by-step, non-techie way, how to control your blog post so that you display only a paragraph or two on the main blog page and so readers who are interested in reading more may do so by clicking a "Read more!" link.

NB: This article makes no attempt to explain WHY a certain bit of code is being inserted in the blog template or blog entry. For a more technical explanation, see Blogger.com’s "How to" article at:
How can I create expandable post summaries?

Adding a "Read more!" link in your blog involves two things:
1. Modifying your blog template to enable and display the "Read more!" link
2. Putting additional code in your blog entry (the blog you actually write) so that Blogger.com stops the display at the point you specify and displays the whole blog entry when the "Read more!" link is clicked

Adding a "Read more!" link is a longish process at the start, but the modification to the blog template remains valid until you change your template.

If you wish to print or save this article for your reference, a printer-friendly PDF version may be downloaded from:
readmore.pdf

(The above file is hosted on a free server, so if it doesn't work, I may have exceeded the download limit. You'll have to try after 24 hours... sorry)

Ready? Then Here we go:


1. To modify your Blog Template to handle "Read more!"

First, sign in to your Blogger account.

Select "Change Settings" in your Blogger dashboard. This will take you to the Settings page.

Below the word "Settings" you will see several hyperlinked items in a line, like a menu.

Click the "Archiving" link.

Make sure "Enable Post Pages" is set to "Yes".

Click the "Template" tab (the tab is in the same line as the word "Settings").

Click anywhere in the editing window and hit Ctrl+A (keeping Ctrl pressed, hit A) and then Ctrl+C to copy all the code that’s in your template.

Click anywhere in the highlighted text to remove the highlighting (otherwise the next key you hit will replace the whole shebang).

Open a new Word (or any other word processing software) document or Text file.

Hit Ctrl+V to paste the code.

Save the file (this is a backup in case you make a mistake in the template. If your blog does not display correctly, go back to "Change Settings" in the Dashboard and replace all the code in the template there with the code you’ve copied into your backup file).

Go back to your Blogger template.

Look for the html tag, </style>

Just ABOVE it, copy and paste the following code:
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

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

Then look for the <$BlogItemBody> tag.

BELOW it, copy and paste:
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

Click "Save Template Changes" (it’s usually an orange button at the bottom left corner of the window).

The Blog Template is now prepared to handle posts that use the "Read more!" option.

The next thing is to prepare your blog entry itself, so that blogger.com stops the display at the point you specify and displays the whole blog entry when the "Read more!" link is clicked. You will have to do this for every new post that you want treated in this fashion.

2. Preparing your Blog Entry

2.1 To prepare a new blog entry to handle "Read more!"

Go to your new blog entry (hit "New Post" in the Blogger Dashboard) and type / paste your blog entry in "Compose" view. (This is usually the default view. The word "Compose" should appear without any hyperlinking on the top right-hand corner of your blog editing window – just above the stuff you’re typing).

Format your blog entry to your satisfaction, then place the cursor at the point where you want to stop the display on your main blog page.

TIP: Choose a point at which the reader just can’t wait to see what happens next… the middle of a sentence can be a good point to stop the display.

Copy and paste the following code there:
<span class="fullpost">

At the very end of your blog entry, copy and paste the following code:
</span>

Save your blog entry.

2.2 To modify an existing blog entry to handle "Read more!"

Click the name of your blog in the Blogger dashboard, then click the "Edit" button for the post you wish to modify. Wait for the editing window of the post to appear.

Place the cursor at the point where you want to stop the display on your main blog page.

TIP: Choose a point at which the reader just can’t wait to see what happens next… the middle of a sentence can be a good point to stop the display.

Copy and paste the following code there:
<span class="fullpost">

At the very end of your blog entry, copy and paste the following code:
</span>

Save your blog entry.

That’s all there is to it.

NB: The “Read more!” link shows even for posts that you have not treated in the manner explained in 2.1 and 2.2. This is because the link is in the template. There’s a great way to solve this problem; WRITE MORE!

Have fun with your blog,

Deepak

Copyright © Deepak Morris, 2005
The above article maybe freely copied and distributed, provided the information given below is included in the copy:
Deepak Morris: A non-techie partisan in a techno world. Empowering better communication.
website : http://www.freewebs.com/deepakmorris
blog : http://www.dm01.blogspot.com
Disclaimer: I have no idea if this works for blogs that are not hosted by Blogger.com