Customize Blogger's Template Designer to control the "Read More" font, color and background

This is how to add an extra setting entry into Blogger Template Designer to control the jump break text (usually Read More) font, color and it's background properties. All credits goes to betatemplates.com for the tutorial on how to do this.

Steps

Step 1: Modify Blogger template

Go to "Edit HTML" section and prepare for copy and paste some codes.

Step 2: Insert the first piece of code

Find "Variable definitions" and you will find

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

Replace the text with these codes:

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

Step 3: Insert the 2nd piece of code

Find "]]></b:skin>" and replace it with these codes:

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

Save your template and go to the Blogger Template Designer. You will see and extra 2 settings entry for "Read More" on top of  "Page Text".

References, Sources and Credits:

http://www.betatemplates.com/2011/02/change-jump-break-read-more-font-color.html