"Jump Link" and other interesting ideas

How to add the code required for Blogger-powered post summaries

In order to add the "Read More" function to a customized template, we only need to add a few lines of code to our template's HTML.

If you're adding this code to your blog template, it is best to first add a new (or test) post in which a Jump Link is added. This ensures we can check our template customization to ensure everything works well beore saving.

To add a blog post with a Jump Link...

Simply create a blog post using Blogger's new post editor. This can be done either through Blogger in Draft, or by enabling the new post editor in the Settings>Basic tab of your Blogger dashboard.

Alternatively, you can edit your post in Edit HTML mode, and type <!-- more --> where you'd like the jump link to appear.

Ensure you have some content both above and below the Jump Link. Then publish your blog post.

If Jump Links have not already been enabled in your template, the post will appear in full. In this case, continue reading to learn how to add the code for Jump Links to your Blogger template code.

To add the code for Jump Links functionality to your Blogger template...

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

Then using your browser's search function, locate the following line of code:

<data:post.body/>

Depending on your individual template, you may find this enclosed between <p&gt or <div> tags. We need to leave these tags intact.

If you've added any other "Read more" hacks to your template (or have added other conditional statements to the Blog Posts section), you may discover more than one instance of <data:post.body/>. If this is the case, you need to edit the section which has <b:if cond='data.blog.url != data:blog.homepageUrl> a line or two above this.

Immediately after the <data:post.body/> line, add the following few lines of code:

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

Then preview your changes. If this has worked properly, your test post should display only the content added before the Jump Link. If you receive errors, or this technique did not enable the summaries, clear your edits, check the code you've added and begin again.

Styling the "Jump Link" and other interesting ideas

Now that we have "jump links" enabled by default in our Blogger templates, there are some useful and interesting tricks we may do to style the actual link and other properties of summarized posts.

Here's a few ideas to get you started.

Change the "Read More »" text

This is the simplest customization we can make. Simply go to Layout>Page Elements and click the "Edit" button for your Blog Posts gadget.

On this pop-up page, you can alter the text to something more suitable if desired.

Categories: