Efeito Door

Oiii Como Estão?Bom Eu Proucurei  Em Todos Blog Um Efeito lindo E Trouxe Pra Vcs Vamos Ver?

Visulise Aqui: http://tutoriais-candylovers.blogspot.com.br/ 


1. Abra o Editar Html do blog (Em Modelo) e procure por </head> e cole isso em cima:

<script src="http://static.tumblr.com/rozpbz7/nFim53lu5/jquery.js"></script><script src="http://static.tumblr.com/rozpbz7/tcom53lvc/easing.js"></script><script type='text/javascript'>$(document).ready(function() {        $('.box_containere').hover(function(){                        var width = $(this).outerWidth() / 2;                        $(this).find('.left').animate({ right : width },{queue:false,duration:300});            $(this).find('.right').animate({ left : width },{queue:false,duration:300});        }, function(){            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});        });              $('.box_container3').hover(function(){                      var width = $(this).outerWidth() / 2;                      $(this).find('.left3').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:800});            $(this).find('.right3').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:800});        }, function(){                      $(this).find('.left3').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:800});            $(this).find('.right3').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:800});                  });              });</script>

 2 - Após fazer isso procure por ]]></b:skin> e cole esse código logo acima:

.box_container3{position:relative;width:LARGURA DA IMGpx;height:TAMANHO DA IMGpx;overflow:hidden;   background: url(http://static.tumblr.com/wdf0zke/aKfmbzusw/bg.png) no-repeat;color:white;font-family:'pixel';font-size:8px;text-transform:uppercase;text-align:center;display:inline-block;border:2px solid #851e2f;}.box_container3 a{color:#fff;}.images_holder3{position:absolute;}.image_div3 {position:relative;overflow:hidden;width:50%;float:left;}    .right3 img{margin-left: -100%;z-index:50px;}@font-face {font-family: Pixel;src: url('http://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf');}

Editando o código:
- Em Largura e Tamanho da imagem você põe as dimensões da sua imagem
- O link em vermelho é o background quando passa o mouse. Mude se não gostar.
- ATENÇÃO! Não mude mais nada, pois pode danificar o efeito

3 - Depois Vá em Layout e Clique em Adicionar um Gadget e HTML e cole esse código dentro:

<div class='box_container3'><div class='images_holder3'><div class='image_div3 left3'><img src='URL DA IMG'/></div><div class='image_div3 right3'><img src='URL DA IMG'/></div></div><div ></div><br><br>Descrição</div>

                                                 - Editando o Código -
- Em Link coloque o link que você quer na hora de clicar na imagem. Se Não Quiser, apenas Retire as partes em roxo.
- Edite colocando sua Descrição e hospede sua imagem e coloque em URL DA IMAGEM

Enfim, espero que tenham conseguido.
~ Beijos!

Creditos:Candy Lovers