How to Customize "Read More" Jump Link on Blogger / Blogs
How to customize 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 customize 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 customize 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
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 + "#more"'
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 + "#more"'
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 + "#more"'
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 + "#more"'
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 + "#more"'
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 + "#more"'
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
.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.