How to Add Preloader Status in Blog

Previously, I've posted about How To Add Page Loading Status Image In Blog. But, many people said "It doesn't work." or "The image cannot stop". So, I will post the almost the same trick, that's How to Add Preloader Status in Blog. It's very attractive I think. Why? Because, when you open the blog, you can find a loading status with the animation. Still curious? View the demo HERE. And, if you want to know How to Add Preloader Status in Blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>
<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. Still on the same page, find </body> and add the code below above </body>
<script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
</script>
5. And the last, find ]]></b:skin>, and copy the code below, then paste above ]]></b:skin>
.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;
}
Customize :
=> #000000 is the background color, you can change the code in here
=> #CCCCCC is the loading bar color
=> #FF530D is the loading percentage (number) font color
6. Now, you can click  Save Template

13 comments:

very good, I'll use this in my blog. its amazing. :D

Reply
18/8/13

Free Download Zone is all kind of free paid software, games and gadget collection. You can also get some popular software. Example: Avast ANtivirus 8.01.489 and Fifa 13 International and Malwarebytes Anti malware

Reply
18/8/13

Post a Comment

:) :( :)) :D =))
Loading Comment Form