Simple Blogger Tutorials

Customize and Style Read more (Jump Break) option in Blogger

Blogger has finally rolled out the Jump Break feature which will add a “Read more” link to every posts if every step is done correctly. That is a great news but if style matters then you have to put some more effort to edit, customize and style it.

There can be so many reasons for why you want to edit the Jump Break link. Within this post I will try to cover most of the reasons and solve most of the problems as far as possible, let us see those.

Blogger Read more style

Fix Auto Jump after clicking Read more Link

Blogger team has solved a great problem by enabling “Jump Break” feature but you may have seen that when the “Read more” link is clicked, it takes to the post of course, but the page jumps to the line after the jump-break has been applied. If you think that it disturbs you and your readers as well then edit the code and fix this by this simple step.

Go to Template tab of your Blogger blog, click “Edit HTML”, check the “Expand Widget Templates” check-box and find the below 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>

Within this find and delete this snippet:

+ &quot;#more&quot;

The full code will look like:

    <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>

Change the “Read more” Text

If you have followed how to add Read more link in Blogger and create post summaries then you must have find out how to change the default text. But if you still prefer to do it manually then just replace <data:post.jumpText/> with your custom text, example:

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

Add Image Instead of Read more Link

There can be so many ways to add image instead of the default “Read more” text of Jump Break, here I will explin the simple one. So same as above example again delete <data:post.jumpText/> and add your image here, example:

    <b:if cond='data:post.hasJumpLink'> 
      <div class='jump-link'> 
        <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://image-URL.png'/></a> 
      </div> 
    </b:if >

Styling the Jump Break Link

If you want it to be simple but more prominent then you can add some styling codes to the Jump Break by using CSS properties without altering the orignal codes, for example, copy paste the below codes before ]]></b:skin> and see how it will looks:

.jump-link a {
 padding: 5px;
 background: #3399bb; /* Have a background colour otherwise delete it */
 color: #ffffff; /* Link colour */
}
.jump-link a:hover {
 background: #666; /* Background colour on hover otherwise delete it. */
 color: #fff; /* Changing the link colour on hover */
 text-decoration: none;
}

Try changing the highlighted colour hex codes and see if it matches with your template style. If you want, then check out the demo.

However, adding CSS with not change the auto jump. Any thing more you want to know about Jump Break?

85 comments :

  1. bro i can't find first code in my Templates

    ReplyDelete
  2. trust me, any tutorials would be best without pictures esp. about css because most users want to see how it looks alike.

    ReplyDelete
  3. Sorry, I mean with pictures, not without pictures. hehe

    ReplyDelete
  4. is there a way to change this text in classic templates?

    ReplyDelete
  5. Try adding your custom text to "read more" option from your Blogger's Dashboard > Design > Page Elements tab > Blog Posts and click the Edit link. It's the easiest way to use your own text for the Jump Break.

    ReplyDelete
  6. well, that option is not there for CLASSIC (or whatever the old system is called) templates.

    ReplyDelete
  7. OK, I could have helped you out if the help file had any example codes of how this option is created in classic template. Sorry.

    ReplyDelete
  8. I'd love to know how to add a line break after "read more" so there's more of a space between the jump and the bottom of the post page.

    ReplyDelete
  9. Sorry Sooze, can you explain in detail?

    ReplyDelete
  10. thanks for ur idea..but i can't find the script..

    + "#more"' expr:title='data:post.title'>

    on my template..it has..

    + "#more"' expr:title='data:post.title'>

    which one to delete ..please help.

    ReplyDelete
  11. how to change the colour and change font colour not background co;our

    ReplyDelete
  12. Great tutorial! I've already customized my Read More buttons, and it's a great way to add something different to your template. Thanks for sharing. :)

    ReplyDelete
  13. above code for inserting picture in read more cannot be used for me..instead i am using this code. just edit a little bit in

    ReplyDelete
  14. OK, I get it what you want to show. Updated the post.

    ReplyDelete
  15. Hey!

    I have been looking on Google a lot but can`t find a good answer! Is there a way to expand or collaps post on blog and staying on the first page, so that clicking on Read more doesn`t go to actual page with the post!

    Thanks for amswer or any ideas!

    ReplyDelete
  16. I think it's possible with some JavaScript and CSS.

    ReplyDelete
  17. Hi, thank you for this tips. I tried to customize a little bit more, but I can'd do it. If you don't mind, I have two questions:
    1. How can I resize the background color of "Read More" jump-link in hover? and,
    2. How can I move that "Read More" jump-link, inline and next to rest of the text, not on a new line?
    Thank you so much for your time.

    ReplyDelete
  18. You can easily increase the size of the jump link by applying some CSS to it:

    .jump-link a:hover{
    (other properties goes here)
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);

    }

    The above will scale the "read more" link and will resize it on hover. You can change the amount of resizing by changing "scale:(1.2);" where 1 is the default size, while less than 1 will resize it to a smaller size and more than 1 will increase it.

    ReplyDelete
  19. How can I align the jump break center instead of right?

    ReplyDelete
  20. Find ]]></b:skin> and before it add:

    .jump-link {
    text-align: center;
    }

    ReplyDelete
  21. You made my life easier! And more pretty, to add to that. Hahahaha! Very very helpful tips! Thanks! :)

    ReplyDelete
  22. Thanks a lot.... Your website is really good for Blogger users who really want to customize their blog!
    Thanks a lot.. I'm glad I found this! I'm totally following!

    ReplyDelete
  23. I'd like to know if you could change the size on the image in the post from one to the other.
    Say I have a 350x350 centered image in the full post, if I add a page jump after the first sentence under the picture I would like the landing page of the site to show the image as 100x100 left-aligned and the sentence next to it and the page break link after that.
    Then when you click on "read more" and it takes you to the full post the pic is full sized and center-aligned as created in the original post.

    Is that possible?

    ReplyDelete
  24. Try Googling for "auto read more with thumbnail". This tutorial is written only for customizing Blogger's read more link.

    ReplyDelete
  25. I'd like to know how to insert the "read more" directly after the post. Not at the bottom. You'll see it goes underneath my Like button. I'd like it directly after the last word please!! Easiest way possible! Thanks.

    ReplyDelete
  26. Find ]]></b:skin> and before it add:

    .jump-link {
    text-align: right;
    }

    I hope this will do the trick.

    ReplyDelete
  27. how do I make font size bigger?

    ReplyDelete
  28. Find ]]></b:skin> and before it add:

    .jump-link {
    font-size: 15px;
    }

    You can increase or decrease 15px(pixels) to get your desired font size, say, 20px.

    ReplyDelete
  29. How to hide text before "read more" ? thx

    ReplyDelete
  30. What text are you talking about?

    ReplyDelete
  31. This comment has been removed by a blog administrator.

    ReplyDelete
  32. Verify that you have added the required codes/snippets as mentioned in how to add read more link to Blogger for the blogs you mentioned to have the problem.

    ReplyDelete
  33. Really helpful post.Thankyou so much for writing..But how to change the font to bold and italic...

    ReplyDelete
  34. Use:

    .jump-link {
    font-weight: bold;
    font-style: italic;
    }

    This confirms that Blogger's read more link will be in bold and italic.

    ReplyDelete
  35. Thanks raju...It really worked..Dont forget to check my blog...I would love if you give me some suggestion to improve my blog...

    ReplyDelete
  36. @ Raju : Hi ! if i want to show a text (or an image) on homepage but not in full post (after "read more").. it is possible ?

    ReplyDelete
  37. Find:

    <div class='post-footer-line post-footer-line-1'>

    and after it add your text or image. Now use the proper conditional tags.

    ReplyDelete
  38. Need Help if possible. I applied the code correctly and styled it the way i wanted it however it is taking affect on not only the jump break text but also every link that is after that (i.e. Link Within)

    ReplyDelete
  39. Apply correct CSS, it will work properly.

    I can only help you if you have applied the CSS and leave it as it is until I give it a look. After applying the CSS reply me as ping.

    ReplyDelete
  40. It seems that somehow your LinkWithin widget is taking the CSS rules for the jump-break. So remove the CSS if you don't like it. I have to find out why LinkWithin is behaving like this.

    ReplyDelete
  41. Thank you so much for your quick response it is greatly appreciated! I'm not educated on CSS and I don't really know what I'm doing. I have made many changes to my template and I am not sure if every change was done correctly, would you be interested in re-writing my complete CSS if I pay you?

    ReplyDelete
  42. Sorry Flamerz, but my Paypal Acc is down due to RBI new rules, so currently accepting no projects. Within 1 month I will update it and if you need any help then, just contact me then, I will try my best.

    ReplyDelete
  43. Do you know how to replace read more with a flash button?

    ReplyDelete
  44. This comment has been removed by a blog administrator.

    ReplyDelete
  45. @Annick:
    Are you using any kind of software to write and publish your posts. Some software tends to leave some unnecessary tags which cause to leave a big space between your post section and read more link in Blogger. To solve this you have to edit your post from Blogger's post editor (HTML mode).

    ReplyDelete
  46. Hi Raju, i've got the 'read more' link on my posts. the trouble is that it appears in the next line, like this:

    Mr. Das concludes that the problem is
    ... read >>

    i want the link to be in line, right after the text, like this:

    Mr. Das concludes that the problem is... read >>

    I would be grateful if you could help me out.

    ReplyDelete
  47. Jay, it requires a series of steps and have to edit your template accordingly. Contact me for further details.

    ReplyDelete
  48. hi raju

    how remove space between readmore and last line jumpbreak applied

    same problem as jay in previous comment

    Please give details

    I would be grateful if you could help me out.
    Thanks

    ReplyDelete
  49. Any chance of getting an answer you

    ReplyDelete
  50. Oh.. I almost forgot.

    By seeing the way of writing style I believe Auther and Roshan are the same.

    As I told to Jay that "it requires a series of steps". Taking any one of the Blogger's default template as example and writing posts normally from Post Edition, it can be done like this:

    1.moving the jump-link code immediately after <data:post.body/>

    2.and applying the CSS:
    .jump-link {
    display: inline;
    }

    But this will fail if you are using any other software to write your posts or using paragraph tags to fix Facebook description problem. That's why I didn't wanted to write about it as I don't want my blog readers to complain that "oh... it's not working for me...". I hope you understand.

    ReplyDelete
    Replies
    1. actually, you're missing a VITAL step. it took me a while to figure this out myself, no one else has it documented! the above 2 steps are correct, but you have to add 1 more step.

      step 3 - apply more css to conditional tag "index"

      .post-body div { display: inline }

      it won't work if you use p's in your posts, but it will work well with divs, so give the divs the same margin/padding as you would a normal p and there you have it!

      Delete
  51. Thanks raj

    thanks for your reply.....

    it's not working for me.(I understand the problem you say ,but it wasting two line space...).please help.

    my html code messaged you through contact me link

    I am expecting a reply from you..how to solve it.

    ReplyDelete
  52. Do u have time 4 one more help? I need to remove the jump from my post completely, what i was trying to do was that when i email the post i wanted only a taster and the reader to press read more.. but not on the post itself as i want the whole post showing there?

    sorry im a newbie ;)

    thanks!

    ReplyDelete
  53. hmmm... I didn't tried it but will see what can be done about it...

    ReplyDelete
  54. Hi. I followed your tutorial but when I made it there's a black space. Can you check it out? http://www.kenmoe.blogspot.com/

    It's right before the "Read more" boxt. And line above. How to remove it? Looks ugly as hell.. (Btw my read more says "Læs hele dette blogindlæg >>") :D

    ReplyDelete
  55. More than one jump link codes are added, use only once... Find anything that starts with:

    <b:if cond='data:post.hasJumpLink'>
    [... read more codes ...]
    </b:if>

    And replace everything (including the bold codes) with:

    <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>

    ReplyDelete
  56. Hi Raju. I looked through the comments and I didn't see a solution, but I saw the question asked.

    How do I get my jump link to display inline with my text instead of at the bottom of my page.

    I have a test post up on my page and I haven't figured it out yet.

    Thanks!

    ReplyDelete
  57. My reply would be the same as told to Roshan here.

    ReplyDelete
  58. Hey Raju,

    I was hoping you could help me. I'm using the 'jump link' blogger offers in its post-creation toolbar just fine, but I really want to find a way to have my post expand in the same page (main page) when clicking 'read more' link than to have my post move to its own page.
    Also then, when expanded, to have a link at the bottom that allows the reader to compress it back to it's summary.

    I found some jQuery scripts elsewhere in the web that do this but none of them worked for my blog, for some reason. I really hope there's an easy solution!

    Thank you for your time-

    ReplyDelete
  59. Okay, contact me and give the links of jQuery scripts. I'll see what it can be done!

    ReplyDelete
  60. I took my time to read through all of this super helpful information, and have modified my jumo links exactly as required! Thank you so much for this clear instruction, really pleased with the guidance I found here.

    ReplyDelete
  61. Nice work, I'm so glad to be rid of the Auto Jump

    ReplyDelete
  62. Finally, a blog that explains how to fix my problem of not showing the whole page after hitting "read more" Just a heads up, the trick does not work with the simple template. You might want to add that.

    ReplyDelete
  63. Raymond, it's great that you got your problem fixed, however, these codes are "universal" for all Blogger templates (except dynamic views) and should work.

    ReplyDelete
  64. When I followed your instructions when using the simple template, my entire post disappeared from the main page. However, when switching to another template, it works perfectly. I read about the simple template issue on another discussion about this.

    ReplyDelete
  65. Okay, I will test this with a Simple template and reply you back.

    ReplyDelete
  66. Hey Raymond,
    I almost forgot about it, however, I double checked it on Simple templates, it's working fine. I think you must have missed out something.

    ReplyDelete
  67. Thanks for following up. I couldn't resolve the issues myself, so I must have been doing something wrong. Since I couldn't fix it, I changed templates and I am happy now. Thanks for the tut.

    ReplyDelete
  68. No prob, if you need any help, just ping me.

    ReplyDelete
  69. Raju, your blog and instructions are really clear and systematic... thank YOU. I applied it an it worked, now I only need to increase the size and I saw you already responded to that. However I want to ask, i want all the widgets under the post (i.e. Link within and Addthis share buttons) also to be effected with the jump break so that I geat a clean home page. How do i do that?

    ReplyDelete
  70. Also, is there a tutorial on how to program the labes so that when someone opens any label category he gets summaries (along with a small picture) of the posts under this label?

    ReplyDelete
  71. Use conditional tags for the share buttons and for the next one, I'll have to write a tutorial on it.

    ReplyDelete
  72. Hi! I want to add
    .jump-link {
    text-align: right;
    }
    but I can't find
    ]]> !!!
    it should be within the part that has the jump-link part, right!? Or can I just add it?

    ReplyDelete
  73. never mind my former comment! I found it^^ and it works great! Thx a lot!! :D

    ReplyDelete
  74. Great post, thanks. It looks a lot better once you have this link centered as it is much easier to distinguish from the rest of the post. I put this on my blog at www.beatmushroom.com Would you mind having a look and telling me if it needs anything changed?

    ReplyDelete
  75. Thanks Raju! Your instructions worked like a charm. The jump break link is now in line with my posts!

    I thought it didn't work at first, but then I remembered there were some br tags in the actual posts itself I needed to delete first.

    Thanks again!

    ReplyDelete
  76. Hi Raju - God bless you; thank you for providing this. I noticed a reader asked this question:

    I'd like to know how to insert the "read more" directly after the post. Not at the bottom. You'll see it goes underneath my Like button. I'd like it directly after the last word please!! Easiest way possible! Thanks.

    But I couldn't find your answer. I would like to know the same thing. Can you help? Warmest thanks,

    Tania

    ReplyDelete
    Replies
    1. I replied to him here.

      Other than this there are no simple process. My suggestion, it's always better if it's outside the post so that your readers can notice it.

      Delete
  77. Hi Raju - many thanks for showing me; it wasn't clear. I tried what you suggested but it doesn't work for me (and I don't use any other software for writing posts); guess I'll have to leave it where it is. Thank you for your time!
    Tania

    ReplyDelete
  78. I loathed the default read more link because on my blog, the font was too small, so this has helped me a lot! thanks so much!

    ReplyDelete

Don't SPAM! Read comment policy.

Like