How To Add Lazy Page Loading Effect To Blogger

If you have seen Google Dynamics View Theme for Blogger, then you might be aware of the fact that before the whole template gets exposed a Small Jquery loading ICON appears that literally stoles our all attention. For Example, you are thinking to play a PC game so before you could start playing you have to go through LOADING part. Similarly, we will insert a tremendous Jquery Loading Effect to our BlogSpot Blog so our visitors won’t see the images or content getting load instead we will show them a cute Jquery loading page that would literally amuse them. Today we will be enhancing our BlogSpot Blog with Jquery Loading Effect that would surly grab the attention of our readers.

Lazy Page Loading Effect (LIVE DEMO)

Features of MBL Lazy Page Loader:

It is search engine friendly so it will not affect your Site Speed or anything.
It is compatible with almost each and every browser i.e. Chrome, Firefox, Internet Explorer and etc.
It has multiple Loading effects so you can choose according to your desire needs.
It has flexible coding so you can customize it without any hesitation whatsoever.
It will also help those blogs which take less time to load because the loading features will keep your visitors interested in your blog.

How To Install MBL Lazy Page Loading Effect To Blogger:

The steps are extremely straightforward and would hardly soak 5 minutes to complete the integration. Just do as mentioned below.
Go To Blogger.com >> Your Blog >> Template >> Edit HTML >> Proceed.
Now within the template Search For ]]></b:skin> and just above it Paste the following CSS coding.

/* GSM Lazy Page Loading Effect (www.gsmforest.com) */#gsm-lazyloading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(Loading-GIF-Here) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px;}.MD #gsm-lazyloading { display: none; }@media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; }}#gsm-progress-bar { position: absolute; top: 0; left: 0; background: #de1301; opacity: 0.8; width: 0; height: 18px;}#gsm-loader { height: 100%; display: none;}

Now again within your template Search for </head> and just above it paste the following JavaScript Coding.

<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#gsm-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#gsm-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#gsm-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#gsm-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>

Once again in your template Search for </body> and above it paste the following HTML code.
Paste this coding if you want to show This Loading effect only on your home page. (Recommended)

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='gsm-lazyloading'><div id='gsm-progress-bar'></div><div id='gsm-loader'>This Loading Effect is Powered By<a href="http://www.gsmforest.com">GSM Forest</a></div></div></b:if> 

Paste the following coding if you want to see this loading effect on each and every page of your blog.

<div id='gsm-lazyloading'><div id='gsm-progress-bar'></div><div id='gsm-loader'>This Loading Effect is Powered By<a href="http://www.gsmforest.com">GSM Forest</a></div></div>

TIP: You have to choose whether you want to show the loading effect only on your homepage or on each and every page that is on your blog. According to us, you should keep this loading effect on your homepage because repeated loading effect might annoy visitors.

Now from the above CSS coding Replace Loading-GIF-Here with any of the following Animated loading effect that you like the most.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9f7_eDcpobs8ieV95jJQYP6r-PBvl4aMbkJUvfY9eaLcOJjUpPR3nMNShN5BcEqZRwtw9dRlbN3W81iWLrW9r2VDJ5Erln1lnshi-ag_p4t5KMlwZbgsRrLL3AZZ5NUdWbG702rVpQQ/s1600/GSM-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhepVt3N2zcetOZ-XkxKWxwPVd4DDz7DCuWoO9gpXzo_Uplh4Q9VTtTTVJCkVdia_pfkYnRWV1UOyiS3LZ6kocfUMpf0gyCjkDBDuLldxhkm8vdfZg8tzd_5k_cUmfAcBRMB4F_JU9qops/s1600/GSM-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVh1w_GHBmgQyKEgL5UQ2GbOD6EX5_J6fenzZi-e87vnmw4pf_D8V53A1y6I7eDRm7q9QrF7LZg-Y-WiaoEqXMk8VbWAA99KGmLOA30zQrenBReKYakoFyQPWiJIUBgWPpOI4xWJk5dA/s1600/GSM-Loading-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUA0Ib48ZbdeRFX6zNTTMIOHB4rTScwZ3JQ7w-ktKi8Sev10jQ4h92P1uk7PrHKWABsqIFNrL5vWs3jikxaSYl6ZOv5pik7i7_BTmUN1_7jh1dVSZ0hYJc8Qkif9anf6Rx5DNKhbjqAI/s1600/GSM-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKj562E2tCzDN9uBIm_4eLMeNXZI6qn3-WTs9BLqxjVVINIE91F2QMn0vT3MgLl1_7A36SvXp6z5rcEiypQHlnw8qkTG02Hoige3iDcuhE1z2AKk6i0oTc5Ju86iGL8WIocC0fgl74mg/s1600/GSM-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqnrnONwI5Yrrxaa5hupfJKSnQXvn9Wu3T_GtGZQnK56VtgGHf8-QfGYYmo-FRHaC-Xpk6G0oeC8j76q_Xy3kt4ZZCfG8pFbPfkujymWiK-OxUc9PuW1QQHtZfTjgF61dWY6oLM6emxw/s1600/GSM-loading-6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQ6d-MuOyzW71nbpU5k0phgX6jYJ0giOtqQbDWYgdYcKcshsM6I6B-ElBOZ_NRhJvLfDh6FTXUqV5bUa0XtB_EGjm5e1SLMpCz7D6apVGXNghNw5nc5cAwHw6n8CZFLeoi8buwyY5zJ4/s1600/GSM-loading-7.gif

All Done: That’s all go ahead save your template and now visit your blog’s homepage and feel the difference. Hope your visitors will love this thing because it will make your website more user-friendly.

Posted by:

has written 0 awesome articles for GSM Forest.