25.11.12

Efeito Door

Yoo~~
Trouxe um efeito super legal para vocês ficará igual a 
esse:[www]
Acho que fica super lindo ele no cabeçalho do blog
como elas gostam, autoras e etc...

Vamos Aprender ?

Vá no seu HTML>> aperte f3 e procure por:
</head>
Acima disso cole esse código:
<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>

Agora procure por: 
/b:skin
e cole esse código acima:

.box_container3{position:relative;width:160px;height:160px;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');}
Modifique os tamanhos e a cor da bordinha que irá ficar.
Depois de Personalizar o código vá em Layout > Adicionar Gadget > HTML Javascript
e coloque esse código onde você quer que o efeito apareça:
<div class='box_container3'>
<a href="http://sundayhtml.blogspot.com.br/">
        <div class='images_holder3'>
            <div class='image_div3 left3'><img src='URL DA IMAGEM'/></div>
            <div class='image_div3 right3'><img src='URL DA IMAGEM'/></div>
            <div class='clear'></div>
        </div>
        <br /><br />Descrição</a>
</div>
 Nesse marcador tem vários avatares que podem colocar
no URL da Imagem[www]

6 comentários:

  1. Nossa, que legal *-*
    Não conhecia ;3
    Muito fofo ^^v

    ResponderExcluir
  2. Fofaaaa, muda lá nos seus afilados o meu link! em véz de Fairy Tales é r0ckerplace (o link esta no perfil) Por favor! :c

    ResponderExcluir
  3. Oii Anaa achei muito lindo seu blog muito beem organizadoo, ee see tem A Hayy ficaa maais liindo aiinda, maais vamoos ao assuntoo acc uma afiliação cmg???

    nahatscha.blogspot.com

    ResponderExcluir
  4. amei esse efeito super lindo!
    diamonts-arent-forever.blogspot.com

    Beijos

    ResponderExcluir
  5. Oi linda, achei bem interessante seu blog, ajudando tanto com tutoriais! << Gostaria de saber se vc deseja fazer troca de seguidores, (vc segue meu blog e eu sigo o seu) Diz a resposta, deixa um comentario no meu blog... Abraços!

    docefuturo.blogspot.com.br

    ResponderExcluir
  6. Amei o efeito, muito lindo eu já tinha aprendido no tumblr, mas mesmo assim é bom aprender de novo :)

    ResponderExcluir

Antes de comentar siga essas regrinhas:
- Aceito segue,segue de volta
- Quando Pedir alguma coisa especifique
- Retribuo todos os comentários
- Pedidos de Afiliação só na Página de Afiliações
- Não use palavras ofensivas
- Não me peça para Divulgar porque não aceito Divulgações