27 How to add Blogger's Read More function to customized templates Friday, September 11, 2009 /

As announced yesterday, Blogger have now enabled selective post summaries for our blogs. This means we can add a "jump break" in our posts, after which any content will only be visible on item pages.

Those of us using customized templates will probably need to add the code required for this function to work. In this article, I'll explain how easy this is to implement, as well as some helpful hints for customizing the "Read More" link.

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.

Replace "Read More &raquo" with an image

Those who would prefer to use a linked image instead of a plain text link can replace <data:post.jumpText/>  with image tags, like this:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><img src="url_of_image" border="0" alt="Alternative text" /></a>

</div>

</b:if >

Where "url_of_image" is the true URL of your image as hosted by your image provider (Picasa Web Albums is my current preferred option, and free to boot!).

Display image "thumbnails" on non-item pages

I rather like the hacks which enable automatic post summaries with image thumbnails, so was very interested to see if a similar solution can be used along with our Blogger Jump Links.



Unfortunately, our summarized posts do not (yet) offer an extra class to which we can add attributes for images displayed within them. Instead, we can use some conditional CSS to alter the size (and alignment) of images on non-item pages.



Here's the work-around I've successfully used so far:



Go to Layout>Edit HTML and locate the closing ]]</b:skin> tag using your browser's search function.



Immediately after this line, add the following code - adapted to your personal preferences of course:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style>

.post-body img {

img {

max-width: 100px;

width: expression(this.width > 100 ? 100: true);

float: right;

}

<style>



</b:if>





Change 100 to a different dimension if you prefer your images to be wider or narrower than 100px.



If you prefer images to be aligned to the left, you can alter float: right to float: left instead. Delete this line altogether if you'd prefer the image to appear in the same alignment as specified in your post.



This technique is a variant of Blogger Tricks' Larger HQ Images hack, but instead of enabling wider images, we're using this to create thumbnails. By using the max-width property and omitting any references to height, we ensure images smaller than the specified width will not appear distorted.



To use this technique, ensure you add an image close to the top of your post, before the Jump Link. On non-item pages, this image will appear no wider than your specified width.

Issues with the sidebar shifting beneath blog posts after adding Jump Links to posts

Many people have reported that their blog's layout appears distorted after adding Jump Links to their blog posts. For some layouts, the Jump Link causes the sidebar to shift beneath the blog post, as though the link is outstretching the boundaries of the post section.



In the comments of my announcement post, N@k$h@tr@! explained that this is because the Jump Link is somehow inserted between the opening and closing DIV tags in the HTML of a blog post.



N@k$h@tr@! recommends to view any posts to which Jump Links have been added in Edit HTML mode and delete any <div> and </div> tags you find (full details may be found on this blog post).



The Blogger Team are aware of this situation, and I assume this glitch will be resolved soon.

What do you think of this new function, and possible customization techniques?

I hope this article fully explains how to add functionality for Jump Links to customized Blogger templates, and offers some insights as to how we can further customize the appearance.



Please feel free to let us know your opinions and any ideas for further customization of the Jump Link and summarized posts by leaving your comments below.



Image credit: clspeace