3 May 2011

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. 

18 comments:

  1. I don't know if it still works, but I've been able to add in these breaks by going to the html and adding "", and that breaks the post where that comment is placed.

    ReplyDelete
  2. Interesting, might try it thanks!

    ReplyDelete
  3. I was wondering how people did this, although I think I will stick with the easy method. Insert Jump Break it is!

    ReplyDelete
  4. Very helpful. I've never been a big html buff but you made this very understandable!

    ReplyDelete
  5. Nice, thanks for the tutorial :D

    ReplyDelete
  6. Thanks a bunch! I've been considering adding this to my blog since my posts can get kinda long-winded at times.

    ReplyDelete
  7. Good to know, thanks! I'll probably implement it sooner or later.

    ReplyDelete
  8. Very useful. Thanks a bunch!

    ReplyDelete
  9. Good tutorial. Why dont you make one about maximizing ad profits

    ReplyDelete
  10. Not a bad idea to do this, actually. Good luck with it.

    Also, I was wondering how to do this and couldn't find out how haha. I'm really glad you posted this haha

    ReplyDelete
  11. Thanks a lot. I may use these for my unusally longer posts, so I can keep at least a week up fgor reading.

    ReplyDelete
  12. Thanks for the tut, it came in handy.

    ReplyDelete
  13. Oh, thanks for this! Helped a lot. :D

    ReplyDelete