Fade In/Out Page Loading Effect On Blogger Posts
A very common effect in jQuery is to hide or show an element by removing the color, and we can use it in many ways, for example in blog navigation. The following script does just that by loading a page with a fade-in effect when we navigate to internal blog links such as post titles, tag links, archives, navigation links, etc.
You can see an example in this demo blog , click on the title of any post and see the fade-in effect when the page loads.
2) Click anywhere in the code field and perform a search label using the CTRL + F keys:
3) So, up add this code:
The original script hides the body of the page when it loads, I prefer to change this property to a negative z-index to avoid issues with search engine crawlers that can affect rankings.
Problems?
Note that these effects can increase the load time of your blog, so I recommend using them only if your blog loads quickly and you don't have too many scripts.
If you're already using a different version of jQuery, remove the other version and leave this one read-only.
If you use Mootools or Scriptaculous, you need to make some changes to the code to make it compatible.
If you have another font with a fade effect, it might interfere with it and you might not see anything on the page but the color fade, in which case you're better off without that font.
You can use this effect only for specific links, for example if you only want it to appear when clicking on article titles (older and newer articles) and top tabs in navigation links, replace this line:
Aside from these drawbacks, it seems like a pretty elegant way to load blog pages while browsing, don't you think?
How to set the Fade In Loading effect
1) To add this fade effect to your blog, go to Template > Edit HTML :2) Click anywhere in the code field and perform a search label using the CTRL + F keys:
3) So, up add this code:
4) Save your changes and you're done. You can see this on the download page where the green color has disappeared.
The original script hides the body of the page when it loads, I prefer to change this property to a negative z-index to avoid issues with search engine crawlers that can affect rankings.
Problems?
Note that these effects can increase the load time of your blog, so I recommend using them only if your blog loads quickly and you don't have too many scripts.
If you're already using a different version of jQuery, remove the other version and leave this one read-only.
If you use Mootools or Scriptaculous, you need to make some changes to the code to make it compatible.
If you have another font with a fade effect, it might interfere with it and you might not see anything on the page but the color fade, in which case you're better off without that font.
You can use this effect only for specific links, for example if you only want it to appear when clicking on article titles (older and newer articles) and top tabs in navigation links, replace this line:
$("a").click(function(event){At the same time:
$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){In some cases the page may load for a second and then load with a fade effect, this may be "normal" because the browser takes time to read the script when the page loads.
Aside from these drawbacks, it seems like a pretty elegant way to load blog pages while browsing, don't you think?
Post a Comment for "Fade In/Out Page Loading Effect On Blogger Posts"