Tutorial - Efeito Door

Bom dia leitoras! Aproveitando o feriado né? KKK'

Pois então, eu estava visitando uns tumblrs de html até que eu encontrei um efeito muito fofo para quem quiser usar em gadgets de "Postadoras" "Divulgação" e aonde vocês quiserem! O efeito foi encontrado no HTMLuv! E ele se chama Efeito Door. É um efeito no qual você passa o mouse e parece que uma porta se abre e aparece uma descrição. Live Preview.

Ele é melhor visualizado no Mozilla Firefox.

Chega de enrolação! Vamos ver o tutorial?

1º)  Vá em Modelo > Editar HTML > e pesquise por "</head>"

2º) Cole isto acima de </head>

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

Não mexam neste código!!!

3º) Aperte CTRL+F e pesquise por "]]></b:skin> e cole isto 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');}

Entendendo o código:

1. Para mudar o background, do efeito quando abre, troca o background do .box_container3.
2. Não mude mais nada. Pode danificar o efeito.
3. Caso quiser trocar á borda, mude este código:
   

   border:2px solid #851e2f;

   pela cor desejada. 

    4º) Cole isto em um gadget de HTML/Javascript:

   <div class='box_container3'>
   <a href="LINK">
   <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 style="clear:both"></div>
   <br><br>Descrição</a>
   </div> 

   Por enquanto é isso! Espero que tenham gostado! 

   Comentem e mandem pedidos pela ask por favor :3

   Beijos e até mais!