Blogger Page loading effect on Blogspot Posts

Blogger Page loading effect on Blogspot Posts. How to make Blogger Page loading effect on Blogspot Posts. Easy way to do page loading effect for blogspot. Blogger become more attractive by loading page effect.

All webmasters of Blogger want their blogs have a good beautiful looking as possible. A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels linls. archive, navigation links, etc...

Step 1: To put this fading effect on your blog, go to your Template --> Edit HTML

Step 2: Click anywhere inside the code area and search for the </body>

Step 3: Then, just above </body> add the following code:

<style>

#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/AVvXsEgE0ZeB1_XXLSDskjqLO1WOydbSbU4y_EjS1BAgD-VcD_gb2x2i74wsbVNgKDtZxdaVcZcGgd7oH5RBX_BHdBO_fW5r7k58RiCrPCaKvWCv0n64FWGVivoduZVwT0e9YL8YZo0WrKGcaLI/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="page-loader">Loading...</div>');

$(window).on("beforeunload", function() {

// ... Show the Animation `.fadeIn()`

$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);

});

//]]>

</script>

Step 4: Save the changes and that's it. So you can have Page loading effect on your blogger now. You can alse edit the Css code above to loading effect by your style.  

Don't forget Like and +1 for Tips4Blog if you like this Post! Tweet