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. 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