How to change older, newer and home links to a graphic

First of all, I would like to announce that Suck my Lolly is BACK, baby!

For those of you who may have been following me for a few years, suckmylolly.com was my first site (some of my templates still link there). I loved that URL name, even if some people did not. Oh well, boo to them :P

I have decided to re-launch Suck my Lolly as my premium paid template site. I will be slowly adding my pre-made templates there, all newly buffed and polished (and eventually with some additional features) but check it out and help me support this site!

Templates are cheap, ultra cute and very different.

--------------- now, onto business ---------------

I was recently asked by a friend to change the links at the bottom of her blog for 'home', 'older posts' and 'newer posts'


This is what it looks like at the bottom of your blog (note: there is no 'newer posts' on the front page of your blog)

Here are the steps:

1. Log into Blogger. Click on DESIGN > EDIT HTML
   
   
2. Backup your template before making any changes. This means that if you stuff it up, you will be able to restore your blog to before when you changed it!
   
   
3. Ensure the "Expand Widget Templates" button IS TICKED
   
   
4. Search for the following code. If using a Mac use Command + F and if using a PC use Control + F:
   
   (HINT: Just search for the first line)
   

   <div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
   <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
   
   </span>
   </b:if>
   
   <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
   </span>
   </b:if>
   
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   
   

   It's pretty self explanatory but orange is your newer entries link, green is your previous pages link and purple is your home link. Genius stuff!
   
   
5. Having a new text phrase as the link:
   Let's say you want to have a text link instead of an image link - erase ALL the coloured code and input a word. This would replace the 'Home', 'Older Entries' etc. You can use whatever word you want. Click preview and if it all looks good, SAVE.
   
   
6. Having an image icon as the link:
   Ignore point #5. We are going to insert an image instead of changing the text.
   
   Find some images that you want to use.
   
   Some good sites are:
   
   Upload your icons to your own hosting and grab the direct link to the image. You have to insert the following code into the coloured sections above (so orange is your newer entries image link, green is your previous pages image link and purple is your home image link)
   
   

<img src='http://www.YOUR_IMAGE_URL.jpg'/>

Don't forget the brackets and ' marks!


You can find some icons here:

• Knob Buttons Toolbar Icons
• Free Web Applications Icon set

(there are heaps out there but why not make your own!)

You can see a live example of how this looks here. Yeah I know it's not the fanciest example.

I will hopefully make some icons for you soon!

Have fun!