Add page loading effect to blogger/blog
I
n this post i am go to show you how to add 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 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>
/* jQuery page loading effect by www.gj37765.blogspot.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/AVvXsEi3HCx_u1eVkcWLS1hQUsCcyd-jc3sJzLSGnOnQ-NKyXXEkcFpaPJtpdC0jkqOd-LuVM2IbBDygSoZY79O5xQXRtrwuenpDHFfgFvKqNirauSohWLwLTDmSbY2en1-XB_gBtoG2Ya6u7OyG/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>
/* jQuery page loading effect by www.gj37765.blogspot.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/AVvXsEi3HCx_u1eVkcWLS1hQUsCcyd-jc3sJzLSGnOnQ-NKyXXEkcFpaPJtpdC0jkqOd-LuVM2IbBDygSoZY79O5xQXRtrwuenpDHFfgFvKqNirauSohWLwLTDmSbY2en1-XB_gBtoG2Ya6u7OyG/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>
<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:
Post a Comment