How to Show the Post Title in Blogger Post Summaries

The other day I was reading Creating a Web Site: The Missing Manual by Matthew MacDonald to remind myself just how much I had forgotten. As I read the chapter on blogs I saw a screen shot of a blog with post summaries which showed the title of the post in the “Continue Reading” link.

I thought that it looked so much better than just “Read more…” or “Continue reading…” or the other variations I have seen and decided to try and use it in my blogs. The big question was of course, “How on earth do you do that?”

That meant that I would have to start experimenting and looking through help pages. So, here goes.

First of all, just in case you are not sure what a post summary is, a little explanation. It means putting a brief introduction to your post on the your blog’s Home page. It may just be the first few paragraphs, which is what I do here, or some prefer to put a brief summary of what you will find if you click the link to the complete article.

There are various posts and articles on the Web and you can search them in order to find the method which suits you best. I looked around and tried various methods but the best I could find was Selective Expandable Posts by Ramani. The clearest explanation of how to install and use this is here on Amanda Fazani’s Blogger Buster.

Once you have installed it you will find “Read More……” at the end of every post summary. And, unlike many that I found the link will only appear at the end of the summary, not at the end of every complete post as happens with so many others, including the method in Blogger's own help pages.

So, how do you change the link to include the post title? Surprisingly, it is very easy. All you do is add <data:post.title/> to the link between the <a> tags.

If you used Blogger’s method use your browser’s Find tool to look for this line:

And if you used the method in Blogger Buster look for this line in the code you just installed:

If you used another method then the beginning of the link will always be the same.

Now add <data:post.title/> before the closing </a> tag and to make it read more clearly change the wording to your personal preference. It may be “Continue reading” or “Read all of” or even “Read complete”. The choice is yours.

This is what I have done in my templates:

<a expr:href='data:post.url'>Continue reading "<data:post.title/>"</a>

There are two points to note here:

Leave a space between “reading” or your final word and the <data> tag to stop them running together.
To make it obvious what the title is, and for the sake of good English, place quotation marks around the <data> tag.

This will give you the same link layout as you saw at the beginning of this post.

If you want find out more about the data tags for Blogger layouts you can go to this page in Blogger help.

You can find more details about the Creating a Web Site book here: