Implement Gmail-Like 'Loading..' Functionality on Blogger

Users familiar with Gmail, may have seen the yellowish ‘Loading’ text that appears on top of the page when your Gmail interface is loading. Ever wondered how it would look if you could implement that very same in your own blogger blog? Well look no further, read on. Well to get right down to work:

Login to your Blogger Dashboard.
Now search for the following tag:

<body>
Now replace this with the following code:

<body onLoad=’init()’>
<span id=’loading’ style=’font-weight:bold;position:absolute;font-size:13px; text-align: center; margin-left:auto;top:1px; background-color:#FFD363;’>Loading Page…</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>

This would give the following effect:

For further customization you could replace the line in the red with the url of an image (eg. Inserting the link ‘http://media.techwithric.com/img/ajax-loader.gif’ would replace the yellowish loading text with the following image)

Have further queries? Please do comment!

About the Author

This post was written by Richie Sajan. Richie is a computer engineering student and the founder of techwithric.com. He blogs on softwares, wordpress, web-design, start-ups and random thoughts! He's also a author at Devil's Workshop. Follow him on twitter @richiesajan.

Tags: ajax, bloger, gmail style loader, gmal, loading, tutorial

This entry was posted on Saturday, May 15th, 2010 at 1:00 pm and is filed under Blogging, Blogger, Featured, How-to. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments: 8

Leave a reply »

gnesop.com

February 20th, 2011 at 9:15 pm | Reply »

#5000

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “onLoad”.

Error 500
- Richie Sajan - May 20th, 2011 at 11:26 am | Reply »
  
  #5082
  
  You must’ve missed out something please try again
Swadesh

April 11th, 2011 at 10:15 am | Reply »

#5038

Thanks Richie Sajan for such a useful post. Its working nicely.
I’ve implemented this in my website http://itswadesh.wordpress.com

Infact i was looking for such a script.

This small twick can do wonders in user experience
Gal

May 19th, 2011 at 10:23 pm | Reply »

#5080

Hi, for some reason I get an error claims that some tags are open,

please advise,
Thanks!
- Richie Sajan - May 20th, 2011 at 11:25 am | Reply »
  
  #5081
  
  Hi Gal,
  did you follow the procedure exactly as given here? If your still not getting it right, could you provide more details like the exact error your getting?
Gal Margalit

May 20th, 2011 at 11:58 am | Reply »

#5084

Hi Ric,

Actually I’ve tried several times, error is the following:

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “onLoad”.
Error 500

Body tags gets approved, the script itself blogger is complaining about.

Thanks for replying so quickly (:
- Richie Sajan - May 21st, 2011 at 1:24 pm | Reply »
  
  #5085
  
  The error is rather silly, sorry I didn’t get it the first time. After pasting the code in blogger, just replace the single quotes (‘) for the onLoad parameter in the body tag with apostrophe (unicode: U+0027). For this just type it out using your keyboard, nothing much.
  
  The problem is that as you copy paste the apostrophe gets parsed into quotes (U+2018 and U+2019.)
  
  Just try it out and let me know.
Gal Margalit

May 21st, 2011 at 2:11 pm | Reply »

#5086

Works like a charm.
Pro as usual!

(you should get that copy code feature)

Thanks (:

Implement Gmail-Like ‘Loading..’ Functionality on Blogger

Related Posts

About the Author

Comments: 8

Leave a reply »