Search this site

Custom Search

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:

No comments :

Post a Comment

Thank you for visiting Almost a Technocrat. Due to many spam comments, your comment will be moderated.