Blogger Template Hack: How to Add Read More Links To Blog Posts

In this post I am going to show you a neat little hack that lets you add post titles to read more links on your Blogger blog.
Blogger's Jump-Link (Read More) feature enables you to display summaries of your blog posts on the home page as well as all non-item pages.

You can configure the text displayed for the Jump Link (which links to the item page of the post) by editing the Blog Posts gadget in Design -->Page Elements. However, I have found it useful to add the full title of the post beside the corresponding Jump Link text to make it absolutely clear which post it links to.

How to add post titles to read more links in Blogger

This is a very easy customization. The modified Jump Link will inherit any style you have currently applied to this section. It takes just three simple steps to add this feature to your Blogger blog.

1. Sign in to Blogger, then go to Design --> Edit HTML and check the ‚Expand widget templates’ box.

2. Search for (Ctrl + F) the following section of code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/></a>
</div>
</b:if>

3. Replace it with the following code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/> <data:post.title /></a>
</div>
</b:if>

Preview the change you have just made. If all is working well, you should now see the title of your post displayed beside the text you have chosen for your Jump Link. You can then Save your template and enjoy this quick and useful tweak to your Blogger template.