How to Add a Read More Image to Posts on Blogger

Thursday, November 7, 2013



How to Add a Read More Image to Posts on Blogger

Written by: on

Welcome to the Blogging Crash Course! 

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

How to Add a Read More Image to Posts on Blogger by www.anyonita-nibbles.com
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: 
Boring standard read more link from www.anyonita-nibbles.com
It's pretty boring, right? Here's how your read more link could look: 

Snazzy read more option with image from www.anyonita-nibbles.com

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? 
How to edit your blog's HTML from www.anyonita-nibbles.com

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.
Always back up your blog from www.anyonita-nibbles.com
3. Actually backup and restore your blog, please.
Adding a read more image to posts on Blogger from www.anyonita-nibbles.com
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:
How to isert a break in Blogger from www.anyonita-nibbles.com

Love the Blogging Crash Course? Be sure to read:






How to Add a Read More Image to Posts on Blogger From www.anyonita-nibbles.com

24 comments:

  1. Thank you, This was a big help to me. Although I added the pic, it still says read more under the pic. How can i remove that?

    ReplyDelete
    Replies
    1. Hi BobbieJo,
      Steps 4 & 5 should remove the read more link. Let me know if you're still having trouble.

      Delete
    2. Hey. I have the same problem as hers. And how can I add the image on the center?

      Delete
    3. Hi Vincent,
      replace line 2 with this: <div class='jump-link'> text-align: center>


      I've not tested it yet, but it should work in theory. :)

      Delete
  2. Thank you so much!! I love it!

    http://www.liketheyogurt.com

    ReplyDelete
  3. Read more option is a nice one for new blogs with blogger default templates, i can remenber how my blog looked like the very first time i created it thanks for the info

    ReplyDelete
  4. thank you very much...it helps. More power to ur elbow.

    ReplyDelete
  5. Hi, I managed to do all the steps and I think it looks really good, however, I was just wondering do you know how I would align the image to the center or the right ? Thanks Hunny.

    Here is the site :)

    http://www.frillybookreviews.co.uk/

    ReplyDelete
  6. Hi, I just did this and I think it looks amazing. . . I was just wondering though, do you know a way I could align the image to the center or the right ? Thanks Hunny :)

    Here is my site :)

    http://www.frillybookreviews.co.uk/

    ReplyDelete
  7. Hi Lauren,
    replace line 2 with this: <div class='jump-link'> text-align: center>

    change "center" to "right" to right align.
    I've not tested it yet, but it should work in theory. :)

    ReplyDelete
    Replies
    1. Hi there ^^ I use your tutorial and it's really helpful! but if you want the image in the center here's how to put the code!

      put this code under the div class < div style="text-align:center" >
      then put another < /div > beside the other < /div > so you have double < /div >

      (delete the space first because comment didn't allow code :P)

      Hope this help :D (I've tried it to my own blog)

      Delete
  8. Hi Anyonita!
    Could you perhaps help me? I did everything you said, but I see the image and below it it still says 'Read more'. And also, I'm not able to click on the Image I added :(
    Do you know what I can do?

    Here's my site: http://www.boncolor.blogspot.com
    I'll just leave it like this for a while, so you can see what I mean.
    :)

    ReplyDelete
    Replies
    1. Hi Bonnie,
      What a lovely blog; I love your photos!
      Okay, so I've just had a look at your page source.
      In your blog's HTML line 767 ( ) needs to be removed. Just backspace over that and everything should work fine :) I'm around off & on all day; so if you get stuck, get in touch here or via email (munchies [at] anyonita-nibbles [dot] com & I'll be happy to help you further :)

      Delete
    2. This is what needs to be removed: < b : if cond = ' data: post . has Jump Link ' >

      Delete
    3. Aaaw you're so sweet! Thanks for trying to help me :) and for the quick response. I'm just gonna send you an email, since it still doesn't work! Thanks <3

      Delete
    4. Hello,

      I have the same problem as Bonnie.
      I tried everything you said here, but below my own 'read more' image you still see the original 'read more' sign.
      I really hope you could help me, as I'm going completely crazy over this. :)

      Kisses,
      Shari (Belgium)

      Delete
  9. im a bit confused as to how i get a link to an image and where to put it? xxx

    ReplyDelete
  10. Thank you! I was literally searching for ages for something like this. It's brilliant xx

    ReplyDelete
  11. If you upload your image on eg Photobucket, it'll give you options of links to your photo (Email/IM, Direct, HTML and IMG)
    Click on the Direct, it'll automatically copy it...then you just post it on the image src in the above code xx

    ReplyDelete
  12. For some reason I can't find the HTML code to replace in my blog template code. I've found the same with when I've been trying to find H1 tags etc.
    I think my code is just all messed up and I don't know how I will fix it! I only use the pre set options in the blogger template so don't understand how I'm missing so many things :(

    It won't even let me save the code you've posted!

    ReplyDelete
  13. Tried out the code you gave on one of my blogs, it worked quite well. the read more tag makes it easier to navigate through a blog without a bulky post starring at the readers. Good thing you shared this, i'll be trying out other Widgets here

    ReplyDelete
  14. This worked like a charm! Many thanks

    www.northeastnerd.co.uk

    ReplyDelete
  15. Hi!
    I tried doing this and I couldn't get the picture to show up. I tried dropbox and photobucket and it didn't work.. so I tried just getting rid of it but now my html is all messed up and it won't save anything because it finds mistakes.. and now at the bottom of each of my posts it says,

    "Read more »
    b:if>"

    Even without a page break in my post. Its super ugly and frustrating to have that there.. is there any way you could help me? I even backed up html before i did it but it won't go away..

    lacynicol@hotmail.com

    ReplyDelete
  16. wow, been looking for this, really usefull, used it on Romanian Feed, thanks!

    ReplyDelete

What do you think of this recipe? Be sure to tag me in any recipes you make on social media and use #anyonitanibbles!