Attractive Blogger Page Loading Effect With Jquery

This is also another cool trick to your blog. Most of the time will take 2,3 seconds to view your blog.So, do you like to add some loading effect for that 2,3 seconds? So this is the right tutorial for you.This effect working with Jquery, You better to check the demo link below. You will figure-out , how will it works. Follow these steps to add it your blog.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

<style>
/*  bloggertrix.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2koBKEi_qpMVfXkW8qOAWInAJ5ikPGOl304pcjpJTo1kzkL2ESxGyqIVv_vkA45bQQjYhEaAfnAF1BSrIFGhmBlzlmiQJWRtqPn-JOu0UcEMKU5JhAS_0BC5tctMPHOYzeie3qB2zrQ9/s1600/Bloggertrix-loading.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: #0d5ff6;
    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>

5. Now Find this code by using Ctrl+F <body>

6. Paste 1 of below code after <body> code

* Add this code for showing this effect for all blog pages.

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

* Add this code for showing this effect only home page.

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

7. Now save your template
you are done.