How to customise the read more jump link on Blogger

Today’s tutorial is all about the “read more” jump link on Blogger. I’ll go through how to add it to your blog, change the text, add the post title, add an image and customise the look of it.

The default “read more” link doesn’t really stand out and let people know that there’s more to the post which is why most people like to change it. There’s so many ways to customise this so try out a couple and see what you prefer.

How to manually insert a ‘read more’ jump link in a post

When writing a post in Blogger, click the little broken page to insert a “read more” jump link.

How to change the jump link text

Go to Layout > Blog Post > Edit > Main Page Options and change the Post Page Link Text.

You can alter the text manually in your HTML too. To do this go to Template > Edit HTML > Search for jump-link and find the following code

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

Change <data:post.jumpText/> to whatever you want to appear like Read More or Continue Reading for example. Save your template.

Show post title in the jump link text

To add the title of the post after the read more text go to Template > Edit HTML > Format Template. Search for jump-link and find the following code

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

Add <data:post.title /> after <data:post.jumpText/> so it looks like

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

Save your template

Remove the auto-jump to after jump-break

After clicking “read more”, the page reloads and jumps to the line after the jump-break. If you want to remove this so it loads the post normally, go to Template > Edit HTML > Search for jump-link and find the following code

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

Remove + "#more" so you are left with the following code…

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

Save your template.

Add image, icon or button instead of read more link

There’s quite a few ways to do this, but here is a really simply way. Go to Template > Edit HTML > Search for jump-link and find the following code

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

Replace <data:post.jumpText/> with <img src='DIRECT IMG URL' /> so that it looks like this

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<img src='DIRECT IMG URL' />
</a>
</div>
</b:if>

Now replace DIRECT IMG URL with the direct image source of the image you want to use and save your template.

How to style the “read more” link with CSS

To keep the link but make it suit your blog design go to Template > Edit HTML and find ]]></b:skin>, if you’re having trouble find the b:skin tag, check out this post.

Add the following above ]]></b:skin> and add your styling in between the brackets.

.jump-link { 
/* Style Entire Jump Link */ 
}
.jump-link a { 
/* Style Jump Link Text Link */ 
}
.jump-link a:hover { 
/* Style Jump Link Text Link On Hover Over */ 
}

For example, you could use something like the following (or from our post on how to style a link to look like a button)

.jump-link { 
text-align: right; /* align right of post - can also use left or center */ 
background: #333333; /* change background colour for full width of jump link */
}

.jump-link a { 
background: #333333; /* change background colour for just the text part */
color: #eeeeee; /* change text colour */ 
padding: 5px; /* change spacing around text */
border-radius: 5px; /* change radius of background */ 
font-size: 12px; /* change font size */
}

.jump-link a:hover { 
background: #eeeeee; /* change background colour on hover */
color: #333333; /* change text colour on hover */ 
text-decoration: none; /* no text underline on hover */ 
}

which will make it look similar to the following

Make sure you aren’t missing any colons, semi-colons or brackets in your CSS! Any errors will stop the browser from reading it correctly.