How to Add Post Titles to Read More Links in Blogger

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 iskandarX Society 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.