Add the Script QueryLoader (' LazyLoad ') to Blogger and customize

QueryLoader ?

Black is a blank page ( can be changed) that covers your blog until all the content is loaded , which mean that visitors will not see the actual load of your blog, instead , they see a page loading with a progress bar and the percentage of the page load. this bar and built with j- query and css.

The following procedure allows you to create the progress bar and customize:

 



1 Log in to your blogger account Presentation >> Edit HTML and find this line of code:
------------------------

</ head>

------------------------
And just before that line, add these two line of code:
------------------------

<script src = 'http: //code.jquery.com/jquery-1.5.min.js ' type = ' text / javascript ' />
<script src = 'http: //blogger-loader.googlecode.com/files/queryLoaderpre.js '

type = ' text / javascript ' />

------------------------

2 On the same page, look for this line:
---------------------

</ body>

------------------

and just before , add these lines of code :

------------------------------------------

<script>
 QueryLoader.selectorPreload = & quot ; body & quot ;;
 QueryLoader.init ();

</ script>

------------------------------------------



3 On the same page, look for this line:

------------------------------

]] > </ b: skin >

------------------------------

And just before this line add the CSS codes

----------------------------------------------

{ .QOverlay
 background-color: # 000000 ;
 z-index: 9999 ;
}

{ .QLoader
 background-color: #CCCCCC ;
 height: 1px ;
}

{ .QAmt
 color: # FF530D ;
 font-size: 50px ;
 font-weight : bold;
 line-height: 50px ;
 height: 50px ;
 width: 100px ;
 margin: 0 0 -60px -50px ;
}


Save your template and click View blog

and you will see that the script in action

you just integrate.


Namely, this step is not mandatory .

here is a list of color values ​​: