Tutorial Tuesday - Adding/changing read more

Staying on-topic can be very tough at times so I decided to dedicate Tuesday to a day where I can be off-topic. This tutorial Tuesday I'm gonna show all you other bloggers out there (especially those following me) how to add a "Read More>>" option.

Basic Way

Adding the simple "Read More>>" Is very simple to do. Just simply start writing a post and click the "Insert jump break" on the  toolbar as shown in picture.

Pressing that will add in a symbol which goes from left to right looking something like this:

Now wherever you see that jump break, when a user is viewing blogs on your home page everything below

the jump break will be hidden and only the words will remain.

Advanced Way

The advanced way is not much harder then the Basic Way but does require you to edit HTML code. I suggest you make a backup of your template before we move on.

Now with the backup complete we may start!

1. You should still be in "Design" and "Edit HTML" tab

     2. You should see this box full of confusing things. Now make sure "Expand Widget Templates" is checked

     3. Search for the following code (windows users use control + F):

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

     4. Then paste in:

<Group description="Read More" selector=".jump-link"> <Variable name="rm.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/> <Variable name="rm.color" description="Color" type="color" default="#f9f9f9" value="#eeeeee"/> <Variable name="rm.h.color" description="Hover Color" type="color" default="#eeeeee" value="#eeeeee"/> </Group> <Group description="Read More Background" selector=".jump-link"> <Variable name="rm.bg.color" description="Color [www.betatemplates.com]" type="color" default="#000000" value="#000000"/> </Group>

     5. Now find:

]]></b:skin> 

     6. Then right before that paste:

{ float: right; font: $(rm.font); background: $(rm.bg.color); } .jump-link a, .jump-link a:visited { color: $(rm.color); } .jump-link a:hover { color: $(rm.h.color); }

Now when you head over to "template designer" you will have 2 new tabs for customizing your "Read More>>"


Credit: Answered question on yahoo answers simplified.