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.
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.
19 Comments:
You´re so right, Amanda! I always forget IE6 :$
In LoadInfo you can also generate personalized loading icons, but I like butterflies...
very useful tip!!!!!
thanks!
i want to ask you, about a wordpress like pagination in blogger...is that posible?
thanks!
For Yo Misma:
Load Info is a really useful resource! Thank you for the link!
For Vassileios:
As yet, the pagination is very difficult to implement in Blogger blogs. I have made a few unsuccessful attempts at this so far, but as soon as I can find a working solution I will be sure to post this here!
Thank you both for your comments!
Thank u..thank u...thank u..amanda.
i love u.
by the way how about ur 2 little monster. Still little or becoming giant monster???lol
oops...in IE7, it is loading all the time. i tried to reload IE7 couple of times but still loading continuously.
how can i solve this prob..amanda
also like to mention that in my country most of the reader use IE7.so it's annoying both for me and them that it's loading all the time.:(((
Very useful!! Thanks again.
wow amanda...you are super cool...thanks a lot...love it.... :)
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "body" must be terminated by the matching end-tag "".
help...
Very Cool!!
**Using it**
Please, have a look on www.barriodebenalua.es (corner up-left), I put your useful loading code with my own gif, and it´s showing always behind the header banner. How can I put it on the front??
Thank you very much for your useful blog!!!
how to i center it?
Thanx! You can create your own loading icons here (http://www.ajaxload.info). :)
how to change loading position nearly pointer.. but thx it's work for me..
greate!
Hey Amanda, it's a great add-on! But I have a tabber by barelyfitz and it's not working. The tabber doesnt load along with another scripts... Do you know how to fix this problem? Thanks!! :D
Thanx so much cute Amanda :)
very nice tip
Thank Amanda. Sending you kiss for this trick.
Anyway, is there a way to show this widget in the centre and in the front of template?
I tried to mess a little with the code, but I was and able to convince the image to stay on top of a template.
Any advice?
great .. it actually works.
what if you wanted it to appear in the centre and hide the page untill it loads? like a loading screen?
Post a Comment