You've probably seen "ajax-style" loading icons before. These small animations appear on web-pages while page elements are loading, and disappear (or are replaced by content) when the page has fully loaded.
Inspired by the page loading feature I noticed in Meta-Microcosmos, I decided to find out how to add an animated ajax-style loading icon to Blogger templates.
After a little trial and error, I discovered a solution which is cross-browser compatible and can be added to your template in one easy step. So in this tutorial, I'll explain how you can add an ajax-style page loading icon to appear in the top corner of your Blogger template which disappears once the page has loaded.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
The loading icon used for this tutorial is the same as that which appears in the top-right hand corner of this blog when you load the page:
This small, unobtrusive image has a minimal file size, and is easy on the eyes so it doesn't detract from other style elements of the page.
Of course, if you would prefer to use a different icon, you can change the URL of the image in the code used for this hack as I will explain shortly.
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 <body> tag.
Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the <body> tag):
<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://bloggerbuster.com/images/loading.gif'/></span>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
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:
<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><img border='0' src='http://image-host.com/your-loading-image.gif'/></span>
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:
<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'>Loading...<img border='0' src='http://image-host.com/your-loading-image.gif'/></span>
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 <head> 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.
Final Thoughts
While this Blogger hack may be mostly cosmetic, it is a fun and interesting feature which can add style and personality to your template design.
I hope this article has been useful for you! If you have enjoyed this tutorial, please consider subscribing to Blogger Buster for future tutorials and Blogger news.
No comments:
Post a Comment