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 = "body";
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
2 comments
Very nice. Thanks for the tutorial. Working like a charm.
Please can you help us to get like your related post widget (Other Tutorials For You To See:)
please help us u r our developper and you can do the best
thanks a lot
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.