How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer



Blogger officially supports 'after the jump' summaries. You can insert a jump break anywhere in a post to make it short on the blog homepage. The part after the jump break will be visible only when user will click on the Jump Break or Read More link. In this tutorial, we'll add some coding in the template HTML. After that, you'd be able to change the font, color or even the background color of the Jump Break or Read More from the Template Designer.

Update!: This tutorial has been updated on 06/18/2016.

What is Jump Break or Read More Link?


If you don't know anything about Jump Break or Read More links, please read the following article in the official Blogger help.

Creating 'After the jump' summaries

Steps


Follow these simple steps to complete this Blogspot tutorial.
  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. Scroll down a bit and you'll see this code:
    /* Variable definitions
    ====================
    Tip: Windows users can press 'Ctrl + f' to fing the code.
  8. Replace the above code with the following code:
    /* Variable definitions
    ====================
    
       <Group description="Read More" selector=".jump-link">
         <Variable name="readmore.font" description="Font" type="font"
             default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 30px 'Courier New', Courier, FreeMono, monospace"/>
         <Variable name="rm.link.color" description="Link Color" type="color" default="#FFFFFF" value="#666666"/>
         <Variable name="rm.link.hover.color" description="Link Hover Color" type="color" default="#222222" value="#f5f5f5"/>
         <Variable name="rm.bg" description="Background Color" type="color" default="#00000" value="#222222"/>
       </Group>
  9. After that, find ]]></b:skin> and replace it with the following code:
    .jump-link { float: right; font: $(readmore.font); background: $(rm.bg); }
    .jump-link a, .jump-link a:visited { color: $(rm.link.color); }
    .jump-link a:hover { color: $(rm.link.hover.color);  }
    ]]></b:skin>
  10. Now, save your template.
  11. After saving template, open the 'Template Designer'.
  12. In 'Template Designer', expand the Advanced tab and you'll see "Read More Link" tab at the top.


  13. You can change the font, color and background color and instantly see the preview. However, changes in hover link color will not be visible in the preview.
  14. After customizing the Jump Break or Read More link, click 'APPLY TO BLOG' link to save your changes.

94 comments:

  1. Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:

    i'm having this problem when saving the template.. please help

    ReplyDelete
  2. @ mawar_biru, send my your template.

    levisinside0@gmail.com

    ReplyDelete
  3. I did everything and it shows up on the advanced editor, but when I click on the colors or font, nothing changes on the actual blog.

    ReplyDelete
  4. @ Alysa, send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  5. @ chefspeaks, please send me your template file, otherwise I can't do anything remotely.

    levisinside0@gmail.com

    ReplyDelete
  6. Great post. Thanx a lot. I was searching this for a long time. thanx a lot again.

    ReplyDelete
  7. Hi,

    I have the same problem as mawar_biru. The buttons show in the Template Designer, however when I make changes it doesn't change anything on the blog. It would be great if you could help me!

    ReplyDelete
  8. look nice but i have same problem like chefspeaks and mawar_biru

    ReplyDelete
  9. @ Sabin, I've tested the tutorial again and its working fine. I guess the problem was the complexity of steps which I've updated. Please try it once more and if the problem still persists then mail me your template file:

    levisinside0@gmail.com

    ReplyDelete
  10. Hi! I followed your tutorial but something goes wrong with a part of my layout. Hope you can help. I already sent you my template file. Thanks!

    ReplyDelete
  11. @ Alyssa Yu, already replied to your email.

    ReplyDelete
  12. Worked wonderfully! Thank you! Is there a way to move it over to the left? Right now, it's all the way to the right. :)

    ReplyDelete
    Replies
    1. Hi,

      In above code, change "float: left" to "float: right"

      Hope it helps.

      Regards,
      Bilal

      Delete
  13. Nevermind! I found it! Thanks, again!

    ReplyDelete
    Replies
    1. I can't seem to figure it out myself. What did you do?

      Delete
    2. @ C.E. Jenkins, email me your template file with the problem:

      levisinside0@gmail.com

      Delete
  14. Thanks! :). I can't work out how to move it over to the Right either.

    ReplyDelete
  15. Be advised - if the Jump Break button doesn't show up in the post editor (like it didn't for me), you have to go to the Settings tab, scroll down to Global Settings, and select Updated editor, and save the setting. Once I did this, the button showed up for me.

    ReplyDelete
  16. I've used your tutorial for how to do the same thing with post header titles, so is there a way to change my jump break font another way, since I've already replaced this variable and skin code for the post titles?

    ReplyDelete
    Replies
    1. Hi Jelli, I've just updated the tutorial and it uses different variables then the post title color tutorial so, go ahead but do save your template before applying new changes.

      Delete
  17. Thanks for this, it looks great! How to you add a break between the button and your footer? They are over lapping with different colours... thanks

    ReplyDelete
  18. Found out where the break goes, thx again!

    ReplyDelete
  19. Awesome template, really appreciate it!

    ReplyDelete
  20. Is there a way to center the "read more" button? This code moved mine from the right side to the left side of my blog.

    ReplyDelete
    Replies
    1. Hi Adrienne, just find ]]></b:skin> and place following code before it.

      .jump-link a, .jump-link a:hover, .jump-link a:visited { text-align: center; }

      Delete
    2. hi, i had the same problem, but this code moved mine from the left side to the right side of my blog and i tried to use the link you provided above to fix it but nothing happened. Thank you for the other codes btw. it was really easy (and i know nothing about coding lol)

      Delete
    3. never mind i figured it out. i didnt use the code above. i just switch the word from 'right' to 'center' in the code you provided in step 6

      Delete
    4. Hi Dhariana, I'm happy that it worked for you. Please support this blog by linking back to this blog. The link code is available at the bottom.

      Delete
  21. It's working fine except the fact that the font color of Read More won't change, regardless of the fact that I changed it in the Advanced edit menu. Any ideas how I can fix this?

    ReplyDelete
    Replies
    1. Hi Sarah, please email me your template file.

      levisinside0@gmail.com

      Don't forget to mention the problem.

      Delete
  22. hi,

    I want to change the read more button so badly. But I can't even find /* Variable definitions. I have CTRL F but still found nothing. Can you help me? Thanks.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Hi Mumbling Baby, I'm no longer accepting requests from commercial blogs. I can customize only personal blogs for FREE.

      Delete
  23. It worked!...
    thANKssss........

    ReplyDelete
  24. I cant find the read more codes :/ (the step five)

    ReplyDelete
    Replies
    1. Hi Vanessa, what is your blog address?

      Delete
  25. Can I change " Read more " with my language: "Citeste mai mult" ?

    ReplyDelete
    Replies
    1. Hi AdmiratorK, Yes. Go to the Layout tab. Edit the Blog Posts widget. There you have an option to change the text of Read More to any other words.

      Delete
  26. Bilal thank you so much for this. I found this guide via your YouTube video and this has saved me a massive headache. Thank you!

    ReplyDelete
    Replies
    1. @ Jay, you are welcome. Please add a link back to this blog. The code is available at the bottom.

      Delete
  27. I have tried this several times unsuccessfully. What happens is that I lose my entire background. What I want to do is simply change the color of the words "read more" and move the words to the right. If you could simplify for me I would be so grateful. Thank you.

    ReplyDelete
    Replies
    1. Hi Harry, please email me your template file.

      levisinside0@gmail.com

      Kindly include your problem and blog address in that email.

      Delete
  28. i have done what you have said, and the new options are there, but when i try changing font size/colour, nothing happens...

    ReplyDelete
    Replies
    1. Hi CEF, please email me your template file with all the problems:

      levisinside0@gmail.com

      Delete
  29. I'm having trouble. Blogger is telling me: Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:

    Help!

    ReplyDelete
  30. I tested it on a test blog and it worked but when I tried to do it on mine something went wrong. It showed up in my editor but it wouldn't let me edit the font. It also moved my sharing icons. I just sent you an email. Thanks so much for your help.

    Best,

    Alina

    ReplyDelete
    Replies
    1. Hi Alina, my services are available only for personal blogs.

      Delete
  31. I added it but nothing happens. Not too sure what I'm doing wrong...

    ReplyDelete
    Replies
    1. Hi CEF, please email me your template file with all the problems:

      levisinside0@gmail.com

      Delete
  32. I THANK U VERY MUCH I WAS LOOKING FOR THIS

    ReplyDelete
  33. you r just awesome dude !
    Thnks.......

    ReplyDelete
  34. Hi, this is great bc I have been looking for it, but now my "google plus one" keeps hovering in a weird place over pictures in my posts and has disappeared from the bottom part of my posts. Any ideas? (www.myfairvanity.com)

    ReplyDelete
    Replies
    1. Hi Rachel, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  35. How can I use it at the post ? srry Newbie :D
    what is the html code if I want to do it at my post

    ReplyDelete
    Replies
    1. Hi Yasin, kindly mention at which step you are facing difficulty. Then I might be able to help you.

      Delete
  36. Works great except I need some help with padding the "read more" so that the line that separates the footer will be below the jump break. You can see the problem here:
    http://diggingtheword2.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Rick, you can hire me for this customization.

      levisinside0@gmail.com

      Delete
  37. Hi I added this to my blog and I have changed the colours, font and size but nothing happens? Not sure what the problem is :S can you help? http://www.carlottasbeautyspot.com

    ReplyDelete
    Replies
    1. Hi, you've a highly customized blog. Maybe that's why the tutorial didn't work but you can hire me to get it fixed. You can contact me through email.

      levisinside0@gmail.com

      Delete
  38. Excellent and thank you! Everything works

    ReplyDelete
  39. Thank you, this is very helpful!

    ReplyDelete
  40. I am having a similar problem as others and can't change the font/colour even though it shows up in the Advanced Template. Could you please help?

    ReplyDelete
    Replies
    1. Hi Aleesha, sorry for replying late. I'm really busy in job these days :( Please email me your template file and I'll look at it.

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete
  41. Hi Bilal, I can't see the preview on my "read more", what can I do? Thank you so much!

    ReplyDelete
    Replies
    1. Hi Xavier, What is your blog address? Can you please explain the problem as well?

      Regards,
      Bilal

      Delete
  42. thank you ! this is great! do you have html to centre the 'READ MORE' instead of having it on the side?

    thanks again! sarah

    ReplyDelete
    Replies
    1. Hi Sarah, thanks for such encouraging words.

      To align "READ MORE" centre, just find ]]> and place following code before it.

      .jump-link a, .jump-link a:hover, .jump-link a:visited { text-align: center; }

      Delete
  43. Hi and thx for this! Is there a easy way to add padding/space below "Read more", between "Read More" and the footer/comment? Now its tight, no air.

    ReplyDelete
    Replies
    1. Hi Tommy, you can add following line just before ]]></b:skin>

      .jump-link {padding-bottom:20px;}

      Spacing can be controlled by playing with the value 20.

      Regards,
      Bilal

      Delete
  44. Hi!
    I follow all your steps and now I can see read more option in advanced section, but even though I change the color and the font size nothing happens.
    This is my blog:
    http://www.anotherside-of-me.com/
    You can tell me why, please?
    Thanks!

    ReplyDelete
    Replies
    1. Hi Dorina, your blog looks customized maybe that's why this tutorial is not working for you.

      Bilal

      Delete
  45. HI

    May I know how to make ( you might also like : ) below each of my post . TQ

    ReplyDelete
    Replies
    1. Hi Qq LI, this is Linkwithin widget. You can access their website for more details.


      Regards,
      Bilal

      Delete
  46. Hi. I don't know what's wrong. I've follow the tutorial, all works. But only one doesn't work. The background color doesn't work. Only that. Can you please help?

    ReplyDelete
  47. thank you very much !!!! I search this tutorial for 1 week (maybe) !!!

    ReplyDelete
  48. Hi, I have used the template, It is showing in the Template designer but doesn't work. are you able to tell me how to fix it?

    http://autismbegone.blogspot.ca/

    Thank you

    ReplyDelete
    Replies
    1. Hi,

      I have checked your blog and the code is not implemented there. Are you still facing this issue?


      Regards,
      Bilal

      Delete
  49. Invalid variable declaration in page skin: Variable is used but not defined. Input: body.text.color

    ReplyDelete
    Replies
    1. Hi,

      Please make sure to correctly implement step 5.


      Regards,
      Bilal

      Delete
  50. its not working for me, It shows in advance ... but what ever I change it does not reflect

    ReplyDelete
    Replies
    1. Hi,

      I have just tried it myself and it's working fine. What is your blog address?


      Regards,
      Bilal

      Delete
  51. Thanks a lot man!
    Can you also specify how to apply Read more button instead of text?

    ReplyDelete
    Replies
    1. Sure. I'll try making a video tutorial for that on my YouTube channel.

      Please subscribe:

      Blogger Help Videos

      Delete

Note: All comments will be moderated.