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 for the tutorial on how to do this.


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="" description="Link Color" type="color" default="#FFFFFF" value="#666666"/>
<Variable name="" description="Link Hover Color" type="color" default="#222222" value="#f5f5f5"/>
<Group description="Read More Background" selector=".jump-link">
<Variable name="" description="Background Color" type="color" default="#00000" value="#222222"/>

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: $(; }
.jump-link a, .jump-link a:visited { color: $(; }
.jump-link a:hover { color: $(; }

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:


Popular posts from this blog

How to recalibrate your Samsung Note 4 battery

A Better SKMEI 1358 Instructions Manual

How to import Tasker projects, profiles, tasks and scenes

How to turn your Windows 7 laptop or dekstop into a WiFi repeater or extender

A Better SKMEI 1418 / 1427 Instructions Manual