Add jQuery Page Loading Effect to Your Blogger Blog


Best Movies Sites: TOP 10 MOVIE WEBSITES


jQuery Page Loading Effect Blogger Blog
Adding page loading effect to your blogger blog will reduce your readers get boring. Its main purpose is to tell your readers that "your content is loading, please be patient". Today let me explain you how to add a jQuery page loading effect to your blogger blog/website. This effect works with jQuery. I hope it can help your visitors to stay for  a while till it gets loading.


You can see a live demo of jQuery page loading effect for blogger blog. What you have to do is just click on the below image and see the demo online and get an idea of what we are going to make here. 


page loading blogger

  Add jQuery Page Loading Effect to blogger
Just follow below simple steps carefully to add this jQuery Page Loading Effect to your blogger blog.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

</head>

Now add the below code just Above/Before </head> (use Ctrl+F to find the code)

<style>
/*  jQuery page loading effect by www.labstrikes.blogspot.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://1.bp.blogspot.com/-oihuvyFdV78/UA0jMnQeZUI/AAAAAAAADeg/_3dvib8GVzs/s1600/MD-Lodding.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");

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

$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

NB: You can change the page loading image by changing image url in the above highlighted line.

Now search for below code too (use Ctrl+F to find the code)

<body>

Copy & Paste below code just Below/After <body>

<div id='md-loading'><div id='md-progress-bar'></div><div
id='md-loader'>Loading...</div></div>

If you wanna show this page loading effect only in homepage you can use the below code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div></b:if>

Preview your blogger template and if you are satisfied you can save your template. Now you're done!

You may also like -



Hope you like it. Its originaly shared by Nitin Maheta, author of Making Different. If you're facing any problem feel free to ask via comments. Happy blogging:)