Tuesday, July 24, 2012

Add jQuery Page Loading Effect to Blogger


In this post i am go to show you how to add  jQuery page loading effect to blogger , first see the demo and if you want to add this nice effect to your blog, just follow the simple steps below...

Demo

How To Add jQuery Page Loding Effect To Blogger?
  • Go to Blogger--->Template--->Edit HTML
  • Tick On Expand Widget Template Check Box
  • CTRL + F to find </head> In your Blogs HTML
  • Copy & Paste Code Below Just Above It
<style>#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>
  • Next Search For <body>
  • Copy & Paste Below Code Just After It
<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div>
OR

If you want to show this effect in homepage only use the code below.
<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>

Now Save Your Template And You Have Done !


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
YOUR ADSENSE CODE GOES HERE

0 comments:

Blogger Tricks And TipsComment here

 

| My Blogger Hack © 2010. All Rights Reserved | Template Style by Lord HTML | Design by Mohammad Mustafa Ahmedzai | Back To Top |

Your Text Link Here