This is one awesome stylish addition you can add to spice up your blog. I've added this animated page loading effect to my blog. You can see a demo here itself by clicking on any link inside the site. It’s gives a cool effect to your blog.I guess you liked it on my blog. So here is how to add it to your blog.
How to add Page Loading Effect to your blog
- Just navigate to Blogger Dashboard> Templates > Edit HTML
- Now search for <head> and below code just below it. (OR search for </head> and paste below code above it)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>Note : You can skip the above step, if you’ve already added JQuery library to your blog.
- Now search for </body> and add below code just above it.
<style>Okay, that’s it. now save your template and look at your blog. Oow!
#bloggslab-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1p3olE-rUfckDNbfbUZ17FX789r389uy7V4Gw28Z9r6P_Sr_ib1GDpcq59S9XGJHxAH9s0gkXIqf8I-XLqk4hGMQh69eSHcbadC7w2gl9oh2T4zIIxfTU6f7YvOeXEUZ80B5ifTgPTo/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="bloggslab-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#bloggslab-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Comments
Post a Comment