Add QueryLoader page to your Artisteer made template

What is Query loader? Query loader it is used to display a page while your blog is loading. The visitors will not see how your widget are  loading or how your article appear, instead of that, they will see a loading page with a bar and percentage of the overall blog loading,. For better understanding you have a Demo at the end of the article.

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </head> and just before it paste the next one:

<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'/> 

4. Now search for </body> and paste the next code before it:

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

5. Go to ]]></b:skin> and before it paste the following code:

.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:-60px 0 0 -50px;
}
 

The red hightlighted numbers represent the color of the background, the blue is the color of the loading bar and the purple is the color of the percentage loaded.
If you want to host the files on step 3 , you can dowload them from HERE

DEMO