Fade In/Out Page Loading Final Result On Blogger Posts

A really mutual final result inward jQuery is the fade final result that hides or shows an chemical cistron past times fading it, too nosotros tin utilization it inward many ways equally for instance inward the blog's navigation. The next script does simply that, past times loading the page alongside a fading final result when nosotros browse on internal links that are inward the blog, such equally shipping service titles, labels links, archive, navigation links, etc..

You tin run into an instance inward this demo blog, click on the championship of whatever shipping service too run into the fading final result when the page is loading.

How To Implement the Fade In Loading Effect

1) To lay this fading final result on your blog, become to your Template > Edit HTML :

2) Click anywhere within the code expanse too search for the </head> tag using CTRL + F keys:

3) Then, simply inward a higher house </head> add together the next 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); });
role redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes too that's it. In greenish yous tin run into where to alter the color that fades on a loading page.

The master copy script hides the trunk of the page acre loading, I prefer to alter that holding alongside a negative z-index to avoid problems alongside the search engine robots that may final result the positioning.

Problems?

Consider that such effects could increase the weblog loading time, thus I recommend using it alone when your weblog loads fast too does non convey likewise many scripts.

If yous already utilization around other version of jQuery withdraw the other, leaving alone this which volition last readed first.

If yous are using Mootools or Scriptaculous, thus yous convey to brand around modifications to the code inward lodge to last compatible.
If yous convey around other script alongside a fade effect, thus it could interfere alongside this too yous mightiness non run into anything on the page except the color fading, inward such cases it is amend without this script.

You tin also utilization this final result alone on around links, for example, if yous desire to seem alone when yous click on the shipping service titles inward the navigation links (older posts too newer posts), too on the overstep tabs, thus supplant this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In around cases, the page tin charge for a minute too thus charge alongside the fade effect, this may last "normal" because the browser is irksome to read the script on page load.

Apart from these drawbacks, I mean value it's a really elegant means to charge weblog pages acre browsing them, don't yous think?