Many of you want to know , How to give a shocking and amazing Ajax Loading effect to Blogger/Wordpress without Using Plugins. There are many steps available but here, we are discussing the easiest method to do so.....
First of all
1.) Add Latest Jquery to your Blog by placing this code:
to the Head Section of your Blog or before </head>
2.) Add the Following code just below <body> tag
3.) Now add the Following Code to your Theme CSS File or in blogger you can place it inside <style> tag:
Replace YOUR_LOGO.JPG and YOUR_ANIMATED_GIF_LOADER.GIF with the URL of the Logo Image and Animated Loader Image respectively....
4.) Now Just before </head > , add this Script , it's the magic Script for this effect
We had used this effect on our Funny Images Website that is hosted on Blogger . Check this out
First of all
1.) Add Latest Jquery to your Blog by placing this code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
to the Head Section of your Blog or before </head>
2.) Add the Following code just below <body> tag
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>
3.) Now add the Following Code to your Theme CSS File or in blogger you can place it inside <style> tag:
#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #3c5a76 url(http://YOUR_ANIMATED_GIF_LOADER.GIF) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.v2 #loading { display: none; }
#progress-bar {
position: absolute;
top: 0; left: 0;
background: #7fb061;
opacity: 0.8;
width: 0;
height: 18px;
}
#loader {
background: url(http://YOUR_LOGO.JPG) no-repeat center 25%;
height: 100%;
display: block;
}
Replace YOUR_LOGO.JPG and YOUR_ANIMATED_GIF_LOADER.GIF with the URL of the Logo Image and Animated Loader Image respectively....
4.) Now Just before </head > , add this Script , it's the magic Script for this effect
<script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
We had used this effect on our Funny Images Website that is hosted on Blogger . Check this out