How To Implement (Fix) The New, Default "Read More" For Your Custom Blogger Template

Like I told you yesterday, Blogger has finally implemented (it took them 10 years) the "Read more" - post summaries on the main page - by default. But if you have a custom Blogger template, this won't be activated for you as there is some code missing from your template and this needs to be fixed manually. If you have an older Blogger hack for achieving this "Read More", don't worry, you can keep the old Blogger hack and still use the new one.

Here is what you need to do to activate (fix) this new Blogger feature for your custom template:

Go to your Blogger Dasboard > Layout > Edit HTML and check the "Expand Widget Templates" box. Then search for something like:

  <p><data:post.body/></p>

Exactly under it, paste the following 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>

Here is how it looks in an original blogger template (non-customized) so you can see where exactly you need to implement the code above:

    <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

So you can post it either directly under data:post.body, or under the div wrapping data:post.body, do as you wish :)

You can then customize the text for the "Read more", by going to Layout > and on the "Blog Posts" widget, click on "Edit" and you'll then find the option to change this text.

If you want to style this 'read more', like making it show up to the right instead of left, change it's color or add an image, you can do this with CSS. I will give you the CSS code for my 'read more' which you can use to modify to fit your own blog. So to implement the CSS for this, go to your blog template and paste the following code above the ]]></b:skin> tag:

.jump-link {
display : block;
background : url(http://www.netupd8.com/w8img/5dlzs8.jpg) no-repeat right top;
padding-right : 20px;
text-align : right;
clear : both;
}
.jump-link a {
text-decoration : underline;
font-weight : bold;
}
.jump-link a:hover {
color : #ff0000;
font-weight : bold;
text-decoration : underline;
text-shadow: 2px 2px 2px #BFBFBF;
}

You can see this in action right here, on Web Upd8. I've styled it exactly as the old hack so it looks exactly the same, but if you go to the main page and hoover over the "Read More!" link for this post, you'll notice the URL has a #more at the end, while if hoovering the "Read More!" link on any older post from our blog, this #more won't show up, because those posts use the old, unofficial hack!


Important! When publishing posts using this new, default Blogger method, don't put the tag in a div, make sure it's outside the div, or else it will break your website!