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 :)
Post a Comment