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.

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 >> Your Blog >> Template >> Edit HTML >> Proceed.
  • Now within the template Search For ]]></b:skin> and just above it Paste the following CSS coding.
/*  MBL Lazy Page Loading Effect ( */
#mbl-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 #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
#mbl-loader {
    height: 100%;
    display: none;
  • Now again within your template Search for </head> and just above it paste the following JavaScript Coding.

$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });

    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });

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='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="">MyBloggerLab</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='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="">MyBloggerLab</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.
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.

From the Editor’s Desk:
Hope you have enjoyed this Premium hack we are pretty sure that this would certainly engage few readers. What do you think about this Lazy Loading Effect for Blogger? If you have any suggestion regarding it feel free to comment till then, peace, blessings and happy loading.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


September 10, 2012 at 12:14 PM

omg thank u faizan bro , I have been lookin for this since ages.

Editorial Team MOD
September 10, 2012 at 12:18 PM

Oh Really, I Am Please To See that you have finally Find it Buddy. Peace

September 10, 2012 at 12:21 PM

Awesome work.

September 10, 2012 at 12:25 PM

great work bro very nice effect.

September 10, 2012 at 1:16 PM

wow! good work

September 12, 2012 at 1:57 AM

Supper Dear :)

September 13, 2012 at 1:41 AM

Nice work =))

September 13, 2012 at 10:35 AM

Good Work.
But Need To Add Some Professional Loading Images :)

September 14, 2012 at 2:57 PM


November 13, 2012 at 5:06 PM

marvelous effect, but I want to use this is in my related post script, is this possible.

September 16, 2013 at 8:14 PM

It work! Great job!!

November 10, 2013 at 2:10 AM

It Works Great.

Thank You :)

July 11, 2015 at 7:08 AM

Great tutorial, used it on my blog although decided to remove it after i realized it only appears for a second. And would be nice if you added more loading screens, cheers bro :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.