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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLY0NOt64vnMHBBG7LrdvSg8DQmSTMqjRCdK4xXpgL7fe7B7R894oe_0K5JVJr8SUq6cdL6yV_Swwew9wuiInYqZgvJvGPt-wiMSEVFNUhkfHnoKZuttQxnCJUIxDYgriihEjdu0O2Mlee/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 !
0 comments: