How to Add Fade Loading Effect to Blogger?

Today, I added the Amazing Fade loading Effect to my Blog. It is working awesome. isn't it? When you click on new post or Whatever..You'll see a jQuery loader image. This effect looks awesome and Visitors feels good that the post is loading Quickly (Actually, It'll not increase the speed. But, It hypnotizes the user :)) For demo, Click Here.

       This effect works with CSS and AJAX. To add this Effect to your blog, Do the following steps.

• First, Go to Blogger > Template > Edit HTML. Press Ctrl+F and Find for </b:skin> tag.
• Just above it, Paste the following code.

#page-loader{background:#F0F0F0 url(http://i.imgur.com/iuDKhox.gif) no-repeat 50% 50%;bottom:0;color:#FFF;display:none;left:0;padding:1em 1.2em;position:fixed!important;right:0;top:0;z-index:99999}

Customization: To present your own image instead of the Circle loading image, Replace this image URL http://i.imgur.com/iuDKhox.gif with your required Image URL.

• Now, find for </body> tag. Just above it, Paste the following code.

<script type='text/javascript'>$(function(){$(document.body).append("<div id='page-loader'></div>");$(window).on("beforeunload",function (){$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});});</script>

• Now, Save your Template. You are all done buddy! Now, This effect works for your blog. Enjoy :) If you have any troubles, Drop your comments below :)