How are you all? I am busy for my examination. It is very important examination. So, I am late for new posts. Really Sorry for this.
Now we will see how to add Loading effect in Blogger. Like my website.
If anyone visit to your site then at first he will show a awesome loading page. After this loading page your website will show. After loading your site will not take any extra time to load. It's really cool. YA...
Lets do it:
Now save your template.
Now we will see how to add Loading effect in Blogger. Like my website.
If anyone visit to your site then at first he will show a awesome loading page. After this loading page your website will show. After loading your site will not take any extra time to load. It's really cool. YA...
Lets do it:
- LonIN to your Blogger account.
- Go to Template > Edit HTML.
- Enable Expand Widget Template.
- Find </html> tag.
- Now put this code just above </head> tag.
<style>
/* jQuery page loading effect by www.allhelpz.blogspot.com */
#md-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(http://www.liddabitsweets.com/wp-content/plugins/simplemap/inc/images/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: #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>
- Now find <body> tag.
- Now post this code just after <body> tag.
<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.
[Please comment for any Problem]
No comments:
Post a Comment
!! COMMENT HERE FOR ANY PROBLEM !!