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 08/06-2012. Now, it can be applied to any default Blogger template without errors.

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. Click the Edit HTML button.

3. A new window will open. You'd have to click the Proceed button to start editing.

4. Scroll down a bit and you'll see this code:
   

   /* Variable definitions
   ====================

   Tip: Windows users can press 'Ctrl + f' to fing the code.
5. 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"/>
      </Group>
   
      <Group description="Read More Background" selector=".jump-link">
        <Variable name="rm.bg" description="Background Color" type="color" default="#00000" value="#222222"/>
      </Group>

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

7. Now, save your template.
8. After saving template, open the 'Template Designer'.
9. In 'Template Designer', expand the Advanced tab and you'll see "Read More Link" tab at the top.
   
   
   
10. 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.
11. After customizing the Jump Break or Read More link, click 'APPLY TO BLOG' link to save your changes.