Tuesday 14 December 2010

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:
(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!

5 comments :

  1. I happen to love the Suck My Lolly name! Can't wait to see all the things you have in store. Love your designs, just need to make up my mind which one I want!

    ReplyDelete
  2. Hi Amanda, thanks for the lovely comment! :)

    ReplyDelete
  3. that's really helpful!
    I think I'm gonna try that :D thanks!
    hopefully you can post more useful things like this :p I'm suck at customizing.lol

    ReplyDelete
  4. SOOOO excited you'll be taking custom orders soon!! I LOVE your layouts & would LOVE to have you design a Blogger template for my upcoming blog, "Serendipity Studios"!

    xxx

    ReplyDelete
  5. This is the matter. I am quite impressed with your tricks. You have such wide range of knowledge about it. Thanks for sharing.

    ReplyDelete

If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,
Sharnee