4/9/12

Floating page loading icon and text for blogger

9:33 AM  ,  No comments

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:

<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&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>
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.

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 :)

0 nhận xét:

Post a Comment

Subscribe to: Post Comments (Atom)