Fade In/Out Page Loading Lawsuit On Blogger Posts

A really mutual lawsuit inwards jQuery is the fade lawsuit that hides or shows an chemical gene past times fading it, together with nosotros tin job it inwards many ways equally for representative inwards the blog's navigation. The next script does but that, past times loading the page amongst a fading lawsuit when nosotros browse on internal links that are inwards the blog, such equally post titles, labels links, archive, navigation links, etc..

You tin run into an representative inwards this demo blog, click on the championship of whatever post together with run into the fading lawsuit when the page is loading.

How To Implement the Fade In Loading Effect

1) To seat this fading lawsuit on your blog, become to your Template > Edit HTML :

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

3) Then, but inwards 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); });
component subdivision redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes together with that's it. In light-green you lot tin run into where to alter the color that fades on a loading page.

The master copy script hides the trunk of the page spell loading, I prefer to alter that belongings amongst a negative z-index to avoid problems amongst the search engine robots that may lawsuit the positioning.

Problems?

Consider that such effects could growth the weblog loading time, therefore I recommend using it exclusively when your weblog loads fast together with does non accept likewise many scripts.

If you lot already job around other version of jQuery take away the other, leaving exclusively this which volition locomote readed first.

If you lot are using Mootools or Scriptaculous, together with then you lot accept to brand around modifications to the code inwards social club to locomote compatible.
If you lot accept around other script amongst a fade effect, together with then it could interfere amongst this together with you lot mightiness non run into anything on the page except the color fading, inwards such cases it is improve without this script.

You tin also job this lawsuit exclusively on around links, for example, if you lot desire to look exclusively when you lot click on the post titles inwards the navigation links (older posts together with newer posts), together with on the transcend tabs, together with then supervene upon 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 together with and then charge amongst the fade effect, this may locomote "normal" because the browser is tedious to read the script on page load.

Apart from these drawbacks, I mean value it's a really elegant agency to charge weblog pages spell browsing them, don't you lot think?

Share this post