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:50%;top:1px; background-color:#FFD363;’>Loading Page…</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>

This would give the following effect:

loading

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) ajax-loader

Have further queries? Please do comment!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s