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

in:

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


  • 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&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!
0 Comments
Disqus
Fb Comments
Comments :

0 comments:

Post a Comment