Klik Tujuh

Hi all hear visitors, It’s been a long time since i wrote my latest tutorial here, and sure this is because working on our new version, which released last week, i wish you liked it all,
Today we are going to learn a new tutorial about how to apply the QueryLoader (LazyLoad) script for your blogspot blog.

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,

</head>

And exactly before it add the following code
And on the same page, please find the following code,

</body>

And before it add the next code,

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

now on the same page too, find this code,

]]></b:skin>

And before it , add this 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;
}

now Click Save Template

And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Now this is an extra step and you can do it or not, as you like,
If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.
This script originally coded by gayadesign.com and customized for blogger by me , For a demo for this script please click here,
In case you wanted to host the file in step 2 on your own server or any where else, you can download it here, Download ( 40 hits )

Sumber : http://www.allblogtools.com/tricks-and-hacks/adding-queryloader-lazyload-script-for-blogger-and-customize-it/