How to Add a Read More Image to Posts on Blogger

Written by: Anyonita Green on 11/7/2103

Welcome to the Blogging Crash Course! 

Helping you grow your blog into the powerhouse you know it can be!

Inserting a jump and showing just a snippet of your posts is a proven way to increase click-through on your blog. In addition to encouraging your readers to actively engage with your posts, you are presenting them with a neat and tidy platform for viewing your blog.

Blog organization is an important aspect of blogging. A cluttered, busy blog may drive readers away instead of welcoming them. You can use jumps within your post to order the structure of your blog's main page and to showcase introductions to previous posts on your blog.

This tutorial will briefly explain the benefits of using jumps within your posts and provide you with a code for inserting your own read more image onto every post on your blog.

---

Why should I use jumps?
Jumps or breaks in your post are beneficial for bloggers because:

1. They help to tidy the appearance of a blog
2. They help to structure a blog post into two sections, most commonly an intro and a main body
3. They encourage click-through rate on your blog since readers have to actively go into each post to read it in full
4. They help the blog to load faster 
5. They prevent duplicate text from clogging your SEO and can increase your SEO campaign's effectiveness

 Jumps, jumps, jumps
You'll probably have encountered jumps loads of times if you're a regular blog reader. When you insert a break on Blogger, it will automatically populate the link with the anchor words "Read More", like so: 

It's pretty boring, right? Here's how your read more link could look: 

All you'll need is a photo that says "read more" or "keep going" or "continue" or some clear equivalent and a bit of code. You can sort the photo yourself, but I'll give you the code. 

Code for adding a read more image to posts on blogger:

All right, are you ready? 

We're going to be editing the main HTML for the blog. Please follow instructions closely.
1. Choose "Template" from the menu on the left.
2. Click "Backup/Restore" in the top left hand corner.

3. Actually backup and restore your blog, please.

4. Click anywhere in the box, press ctrl + f and search for this condition:
 <b:if cond='data:post.hasJumpLink'>

5. It will be highlighted in the text.
6. Replace the entire highlighted condition with this:

1 2 3 4 5

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7nkKSKNIM7wRWrKGXLljPGVXEdwl2pInwJcQDJnMExPD4Gc1jDV2fCcpIHACGCinkILx1wbjmd-Gk2PHkl3hXK7jCRBpKJdq3sF2P8NnywoTOa_NGz1RMWJkJ0HDi7DxPr04fr-QBFs/s1600/Naamloos.png'/></a> </div> </b:if>

Be sure to add in the URL of the image you want to use where it says IMAGE URL HERE.

Click save template.

This is how your post will look when you're composing it and using the jump:

Love the Blogging Crash Course? Be sure to read:

No Follow vs Follow Links

Is Your Link Party Earning its Keep?

10 Tips for Newbie Bloggers