House of Annie

In the last post, I showed how to hack the Blogger template to add a Conditional Expandable Post Summary. This will allow me to display a summary section of a post on a main, archive or search page, and then link to the full post page where the rest of the content is found. But it does that only when the special <span class="fullpost"> and </span> codes are added to that particular post.

This is great, because in the original implementation of Expandable Post Summaries by Blogger Help, you get a "Read more" link on every post, whether you had the special codes or not. But there's still a problem...

The problem is, when you click the link, the page loads from the top instead of where you left off. So you'd have to reread the post from the beginning, or scroll down to look for the section after the summary. It kinda throws things off a little bit. A bit more searching with my friend Google helped reveal an answer.

To make it so the page picks up where the summary left off, you use HTML to create what's called a "named anchor". A named anchor is HTML code inserted onto a web page that acts as a kind of bookmark for a section of the page. Then you code the link to jump straight to the bookmarked section instead starting at the top of the page. I call my named anchor "more". It looks like

<a name="more"></a>

The hard part is figuring out how to insert the proper code in the link so that, when clicked, the page loads at the named anchor. For that, I found some instructions on BlogBloke for creating links to the Comments section of a post. The important difference is that I changed the template code to make the Read More link jump to the anchor named "more" instead of "comments":

a expr:href=’data:post.url + “#more”‘ (* note that there are single spaces around the "+" sign.)

Now, we've got an expandable post summary with a link that displays the page from where the summary left off. But I don't like that "Read more" prompt. I'm fussy. I want the link to say what the title of the post is. This final piece of the puzzle is found on the Beta Blogger for Dummies article, "Add Post Title to Read More Expandable Post Summaries". You have to once again hack the template to add the code

Continue Reading: "<data:post.title/>"... immediately after the a expr:href=’data:post.url + “#more”‘

Once you've done that, save the template, and Bob's your uncle!

One last thing. Internet Explorer is a little more forgiving of minor mistakes in HTML on a page. But the Firefox browser isn't and if there is something not quite right about the coding, it won't display the "Continue reading..." in the right place. So if you're going to hack your template, make sure that you test it in multiple browsers.

Now, let's get back to cooking some real food.

Aloha.