How about giving a shocking loading effect to your visitors.Engage them into your blog using something new,something special.you may take a look to the below screenshot.
Hope now you got what am talking about.Like it and Wanna add it in your site?Ok here we go.
How to Do this?
- Go to Blogger Dashbord > Template > Edit HTML.Search for <head> tag and add the below jquery library just after <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>After adding this you also have to add the following script after the previous one.
<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>
- Add the following code just after the <body> tag
<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div> - Now add the following code before ]]></b:skin> tag
#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #3c5a76 url(http://2.bp.blogspot.com/-3EigcNX6oak/UFRyQBMI8-I/AAAAAAAAAF0/59LtO4wgKV8/s1600/downgif.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://1.bp.blogspot.com/-lOxi3br4DF4/UFR0jN1OiPI/AAAAAAAAAF8/6rSbuKr91lg/s320/down1.jpg) no-repeat center 25%;
height: 100%;
display: block;
}
NOTE:If you want to change the loading text or animated loading image according to your site then just change those coloured url..
Now save template and you're done.
Post a Comment