Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hide or shows an element by fading it, we can use it in many ways







How to use The Fade in Loading Effect:

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 </head> tag using CTRL + F keys:

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>


Step 4: Save the changes and here you go. In RED you can see where to change the color that fades on a loading page. 

The original script hides the body of the page while loading, I prefer to change that property with a  negative, z-index to avoid problems with the search engine robots that may effect the positioning.