Efeito de carregamento de Páginas (Fade In / Out) [003]

Yo queridos bunnies, como vão hoje? Venho trazer mais um efeito de entrada de páginas para vocês. Esse efeito é bem similar ao Entradas Fade no blogger, a diferença entre ele é que o outro o efeito aparece ao abrir a pagina, enquanto esse aparece quando clicamos em algum link que direciona pagina. Como:. menus, paginação ou quando clicamos para abrir uma postagem. Ainda é possível escolher a cor do efeito. Aconselho sempre usar uma cor similar ao fundo do seu background, os créditos para esse tutorial está no final do blogger.

Brevia do efeito

1. Vá ate seu HTML e utilizando CTRL+F procure por </head> e acima adicione:

Códigos

<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>

Salve! A parte marcada em roxo/azul é a cor do fundo, basta mudar.

Você também pode usar este efeito apenas em alguns links, por exemplo, se você quer que apareça somente quando clicar nos títulos. Como por exemplo o "Inicio" "Postagens antigas" "Postagens Recentes". Basta substituir esse código:

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

por esse:

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

Infelizmente essa opção na navegação não é em todos os blogs que ele funciona, e também aconselho em blogs que não sejam muito pesados. Principalmente se seu blog for pesado e com muitos scripts. 

Créditos: Coelho Alado.