How to add Blogger's Read More function to customized templates

Will the "Read More" feature work for my customized template?

For most Blogger users, adding the code required for Blogger's post summaries will enable selective summaries without error, even if you've already added the code to summarize your posts using the <span class="readmore"> hack.

The only templates this method will not work with is those which have added an automatic post summaries hack, which summarizes the posts based on the number of characters or words. This is because such customizations ignore any code added to the body of our blog posts and don't register Blogger's Jump Links.

If you'd prefer to use Blogger's Read More function than your current automatic post summaries, the simplest way to adapt your template is to remove references to the post summaries script - anything between the <script> and </script> tags used for your particular method.

If in doubt, refer to the author of the particular version of this script you are using. 

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.

Styling the "Read More » text

The "read more" text (or whatever phrase you may have changed this to) is enclosed in a <div> with the class of "jump-link". This enables us to add CSS to our <b:skin> section to affect the style of this particular link.

For example, the following CSS will give the Jump Link a red background, with white text and 3px of padding, thus overriding any other style statements for any instance of this particular link:

.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}

We could also add a :hover property with different colors for the background and text to create a different effect when a reader hovers over the "read more" text:

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}

If you're fairly confident with CSS, you could easily adapt these examples to include background images, rounded corners, and indeed any property which would work with a link in the post.

 

 

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email