If your page is taking time to load, this may be the best solution to tell your reader to be patience. You have seen many animated loading icons in Facebook, Fire Fox tab, and anywhere else. The icon disappears when the page is completely loaded.For the dome look can look at here(see the top right corner). This tutorial may be easy to you but, it was difficult to make the script. Here is the tutorials how to add in your blogger blog.
Adding floating loading icon in your blog
It's simple, just you have to copy and paste script in your template code.
Go to layout and Edit Html. In your template section, find the the code <body>
Then, replace the tag <body> with the following code:
Now you can see the loading animated icon in the top right of your blog and it will disappears when your blog is completely loaded.<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://imgboot.com/images/anupviews/loading1.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>
Changing animated icon and text
You can change the animated icons with another image or text. You have to change the red colored URL with your image URL. I host the image in Imgboot. It is ultimate image hosting service. You can host with your own service. But, don't try to host it with blogger because the animated image will stop animating.
Here are some animated loading icon:
<img src="http://imgboot.com/images/anupviews/loading1.gif" border="0" />
<img src="http://imgboot.com/images/anupviews/loading2.gif" border="0" />
<img src="http://imgboot.com/images/anupviews/loading3.gif" border="0" />
<img src="http://imgboot.com/images/anupviews/loading4.gif" border="0" />
<img src="http://imgboot.com/images/anupviews/loading5.gif" border="0" />
And if you want to place text with animated icon, just type your text instead of image URL. Type the text link Loading, Please wait, Be patience or what ever you link.
These codes are not only for blogger, everyone can use who are involved in web designing and who have HTML parts.
Hope this help you. If you found any other animated icons you can share with me via comments :)
Labels: Blog, Blogging, Web design
Great Anup.I like the arrow marks animated loading icon.
ReplyDeletemay be better position you change with fixed not absolute
ReplyDeletetry it ;)
Would love to implement this in Wordpress too. :P
ReplyDeleteThanks dude! Just found the solution on another site too. Thats a cool tool, Blogger-Code-Converter, I'll have to try it again sometime. Btw, subscribed to your feed, nice blog :)
ReplyDelete@motocross clothing
ReplyDeleteThanks for subscribing :)
Depends on the Drupal project at hand, sometimes we might commission icons from a designer, most times budgets don’t stretch to that (they can be very expensive) so we just try to match something that goes with the overall design, either from our library or purchasing an icon set.
ReplyDeletei was thinking about enlarging it. i tried but still trying. I want that gif image to cover the whole screen.i.e. instead of busy sign i am thinking of adding image that will cover the whole document and will be off like the gif after document is fully loaded. and if the image is done i have more plans for this. give some ideas or demo or codes that will help. demo will help if u found solution.
ReplyDelete