.

Floating page loading icon and text for blogger

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

COMMENTS

BLOGGER: 7
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Floating page loading icon and text for blogger
Floating page loading icon and text for blogger
http://imgboot.com/images/anupviews/loading1.gif
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
http://www.hacktutors.info/2010/03/floating-page-loading-icon-and-text-for.html
http://www.hacktutors.info/
http://www.hacktutors.info/
http://www.hacktutors.info/2010/03/floating-page-loading-icon-and-text-for.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy