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