Thursday, March 10, 2011

Tutorial Thursdays: "Read More..." on blog posts

In today's post, I'll be showing you how to add the "Read More" function on your blog posts. This is super handy when you have very long posts.

There are many posts on my blog that have this function if you are interested in seeing it live.

Here is a screenshot of what it looks like:

To add this neat little link, you'll have to edit the html on your blogger layout.

But before we do that, go into any post you've made and Edit the html.
Add this code wherever you want the "Read More" link to show up.

<!-- more -->

Example (using the above screenshot):

Next, we're going to add the code that makes allows the "Read More" to enabled.
We are going to need to edit the HTML in our layout by going to:
Dashboard -> Design -> Edit HTML (as shown below)

Once here, I would backup your layout (you never know what can go wrong). The easiest way is to click on the Download Full Template button below "Backup/Restore Template".

Next, make sure "Expand Widget Templates" is checked off. Then, look for this code in your html (I would CTRL+F for "post.body"):

Right below the post.body code snippet line, add the following:

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

At this point, click on preview and see if your post shows the "Read More" where you've placed the <!--more--> code. If it does not work, reload your backed up template and follow through the steps again. From now on, you only need to insert <!--more--> whever you want a "Read More..." link to appear in your posts.

If you would like to change the "Read more" text to something else like "See the rest of the post", you can do so by going to:
Dashboard > Design > Page Elements > Blog Posts (Edit)

Once you click on Edit, a new window will pop up. You can edit the text shown below to whatever you'd like it to say.

You can edit the css code to make the link whatever colour you'd like using this below. As always, css codes go within the "head" tags of your html sheet.

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

The above gives a black box and white text over top for any active links.

.jump-link a:hover {
background: #fff;
padding: 3px;
color: #000;

The above gives a white background with black text when someone hovers over the link.

To Use Images as Links:
Below the post.body code from above, use this code instead:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'>
<img border="0" src="YOUR IMAGE URL HERE"/></a>
</b:if >

This will use in image instead of the "Read More..." text wherever you've placed the <!--more--> tag.


Related Posts Plugin for WordPress, Blogger...