How To Add Post Titles To Read More Links In Blogger

Add interest to your "read more" links by including each post's title

Blogger's Jump-Link (Read More) feature enables us to display summaries of our blog posts on the home page (and all non-item pages).

We can configure the text displayed for the Jump Link (which links to the post's item page) by editing the Blog Posts gadget in Design>Page Elements. However, I've also found it useful to add the title of the post beside the Jump-Link text to clarify the title of the post to which it links.

If you're reading this post on the home page, you'll see an example of this in action a few lines below.

This is a very easy customization and the modified Jump-Link will inherit any current style you've applied to this section. Here's how to add this featre in a single, simple step.



Go to Design>Edit HTML in your Blogger dashboard and check the Expand widget templates box. Using your browser's search function (usually CTRL or CMD + F), locate 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>


Replace this with the following:


    <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've just made - if all is well, you should now see the title of your post displayed beside the text you've chosen for your Jump-Link. You can then proceed to Save your template and enjoy this quick and easy tweak to your Blogger template.


I hope you find this post useful for customizing your own Blogger-based sites. Please feel free to leave your comments and opinions below.