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!

Momentary Image Lapse!

Apologies if anyone's images in their template were broken (aka: Photobucket bandwidth exceeded gif from hell). Unfortunately this is something I pay for myself and I had accidentally let my pro account lapse.

It should be fixed soon as I have just upgraded my account.

Keep your widgets when changing your Blogger template! Woo Hoo!

I don't know if you have noticed but Blogger has introduced functionality to allow you to keep your widgets when you change your template!

WOW!

That was the biggest complaint that I heard from people who wanted to use my templates!
"Oh, I like the template but I don't want to lose my widgets / links etc".


SO WHAT'S THE DEAL?
When you upload a template to your blog now, it comes up with a prompt as below:

If you click on 'Delete Widgets' then all your widgets (links, search bar etc) will be gone and you will have a fresh new blog with no dramas and a shiny new template. Except your widgets have gone.

If you click on 'Keep Widgets' then this is great because your current widgets will stay and the template will change! Just what everyone always wanted!


BUT....

(c'mon, you knew there had to be a but)

... sometimes, due to how things may be labelled in the code of the blog, you may get some hiccups occurring. I don't expect this to make perfect sense to you (and that's fine) but if you often change your template then remember this post and come back and visit it again if you have troubles.

You may find something odd happens to your blog if you click on "Keep Widgets" like I did:

Yeah, a double up of posts!

How annoying!

This is how it looks in the Page Layout area:

For some reason, the new template had a "Blog Posts" area, and you also kept the "Blog Posts" area from your old blog (each labelled with a different name).... so now you have two! Exactly the same! Arrr!


If you experience a problem like this, here is what to do:

1) Go to the Layout Edit HTML tab within Blogger

2) Make sure the "Expand Widget Template" button is NOT ticked (it will be easier on your eyes this way):

3) Scroll down through the code until you find the following (hint: it will be towards the bottom of the code):

</b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog' />
(highlighted below)

THE IMPORTANT THING TO REMEMBER IS: that there are TWO 'Blog Posts' areas (see how one is labelled 'Blog1' and one is labelled 'Blog2' above?

I can identify which one I want to remove because of the first warning that came up when I changed my template (see below).

I can see that Blog1 was part of my blog before I changed the template (as indicated above) so therefore I need to erase 'Blog2' within the code.

This may be reverse for you, so please keep this in mind.

(In reality it may not matter which one you remove, I'm not sure at this time. But that's how you tell which one was part of your blog originally)

4) Go ahead and delete that line of code (in my case it was the pink highlighted line above)

5) Save.

6) On the next screen it will say something like this:

Click "Delete Widgets" because, no, we don't want our blog posts doubled up!

DONE!

I know this is going to be kind of confusing unless you actually have this problem, so please don't think too hard about it at this time. The information is just here in case you need it!

I am honestly not sure if any other things can be doubled up on like this can, but leave me a comment if you notice and I shall investigate.

I hope this makes some sense!