How to add a “Read more!” link only when you want it by a double-post method

This post has little to do with the Libertarian Party of Wake County, but if you blog using a classic Blogger template, there's some useful information here.This double-post method applies to Blogger classic templates. With this method, you don't have to choose between always having a “Read more!” link or never having one. You can add it only when you want it for long posts. It requires publishing your post twice in order to get a working “Read more!” link, but it doesn't contain any scripts, so I think it's the best method.

Before creating any posts containing a “Read more!” link, you need to enable post pages in your Settings and then modify the Template by adding the code under Template Additions below.

Once that is done, you can continue with the either of the two methods below for adding a “Read more!” link to particular posts.

Choice of Two Methods
Both methods accomplish the same thing in the end. They are really just variations on the same method, but there are some differences.

The Copy and Paste Method can be used for any posts as needed. You can use this method for posts published by email or any posts already published, simply by copying and pasting the correct Permalink URL and html code into the post, and republishing it.

The Post Template Method works for new posts only. In this method, you put the code in the post template, so that it shows up automatically each time you create a post. You publish your post with the code included, then add the URL for the “Read more!” link, and republish. The advantage of this method is that it saves you from having to copy and paste code each time you want to add a “Read more!” link. A disadvantage is that for the few moments that it takes you to place the correct URL in the “Read more!” link and republish your post, that link doesn't work on your main page. Another issue with the Post Template Method is that if Blogger opens to create a new post in the Compose mode instead of the Edit mode, the html code may appear slightly different, and you will need to make sure your code is correct if that happens.

Copy and Paste Method
Publish your post in full, just as you normally would, and find the Permalink URL for the post, usually by clicking on the timestamp in the post footer.

Copy that URL to your clipboard, return to edit the post in Edit mode, and paste the Permalink URL for the post where you want the “Read more!” link.

Copy the following code and place it RIGHT BEFORE the URL that you just pasted, and eliminate any extra spaces.

<a name="fp" id="fp"></a><br /><br /><span class="readmorelink"><a href="

Copy and paste this code RIGHT AFTER the URL with no extra spaces:

#fp">Read more!</a></span><span class="fullpost">

At the VERY END of the post, add this code:

</span>

Re-publish the post, and check to see that your “Read more!” link works properly. And you're done!

Post Template Method
The first step of this method is to enter the code below in the Post Template found under Settings, Formatting. You only need to do this one time.

<a name="fp" id="fp"></a><br /><br /><span class="readmorelink"><a href="BlogItemPermalinkUrl#fp">Read more!</a></span><span class="fullpost">

</span>

When you don't want a “Read more!” link in your post, simply clear the page in Edit, being sure to delete all the code that you don't need. When you do want to add a “Read more!” link, follow these steps in the Edit mode …

Put the beginning (or introduction) to your post right before the html code.

Put the rest of the post directly after <span class="fullpost"> and before the final </span>.

Publish it once to obtain the permanent link URL to the post page. Copy that URL to your clipboard.

Edit the post again, replace “BlogItemPermalinkUrl” with the permanent link URL.

Publish it again, and check to see that your “Read more!” link works properly.

More about this double-post method
The first part of the html code (in bold above) provides an anchor in the post page. The #fp in the link part of the code points to this anchor that controls where you land on the post page when you click on the “Read more!” link. You can move the anchor and/or the line breaks.

Posting by email automatically posts in full, disregarding any code in your post template. If you later want a “Read more!” link, you can add it using the copy and paste method above.

You can edit “Read more!” to say “Continue” or whatever you like.

Examples
There are several examples of “Read more!” links (often using different words) on the September 2008 Archive Page of this blog. Scroll down about halfway down that page to see them right before the post footers. The most interesting example there is the link to this post, right at the bottom of that page. In this case, I didn't need the anchor link. As you can see there, the entire sentence there is the read more link. (The sentence replaced the “Read more!” text in the code, and nothing was placed above the code.) Why? Because I didn't want that explanation to show up at the top on this post page, but I did need something to explain the post on the Archive page.

Template Additions
It's always a good idea to backup your template to a text file before making any changes to it - just in case something should go wrong. After doing that, just add these lines to the style section near the top of the template. I put these right before the “body” section. Save and publish the template.

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

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

click back to the post page section

Thanks to Thurbroeders
Many thanks to the owner of “thurbroeders” blog where I first learned this double-post method of adding a “Read more!” link. You can find a full explanation of this method there with examples. Here's the link to that post:

Expandable Post Summaries?