Adding the Loading Icon to your Template

Adding this page loading icon is as simple as copying and pasting a section of code!

Simply go to Layout>Edit HTML in your Blogger dashboard, and find the opening tag.

Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the tag):





You can then preview your blog to see the page loading icon appear in the top right-hand corner of your blog template momentarily until the page has loaded.

Providing there were no errors received when you previewed the page, you can then proceed to save your template.

That was easy, wasn't it?
Changing the Animated Icon

Of course, some of you may prefer to use a different animation to the one featured here.

Any animated GIF image may be used as a page loading icon, and all you have to do to alter the image is change the URL in this line of the script to match the location of your preferred image instead:



Ajaxload is a really useful resource for generating your own color styles of image loading icons. Alternatively you can find a great selection over at Sanbaldo.com
Adding text to the loading icon

You can even add an explataroty "loading..." message to your icon by adding this just before the icons image tags, like this:

Loading...
A little info about this script

I had originally experimented with the script used in Meta-Microcosmos to feature the loading icon which is housed in the section of the template.

However, this caused some problems when viewed in IE6 as this caused the icon to appear above the template, rather than in the corner (it occasionally caused the page to freeze too!).

So instead I adopted this version which uses the body onload function to cause the script to take action. This ensured that the icon appeared correctly in all browsers I have tested in, including IE6 and 7, Firefox and Flock.

If you notice any problems in other web browsers, please let me know about this!

Also you may have noticed the need to "escape" certain HTML characters within the script itself. This is because Blogger parses JavaScript differently when it is featured in the body (rather than the head) section of the template. However, when you look at the source code of your template, you will see the original script coded correctly.