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:
no URL da Imagem[www]
<div class='box_container3'>Nesse marcador tem vários avatares que podem colocar
<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>
no URL da Imagem[www]
Nossa, que legal *-*
ResponderExcluirNão conhecia ;3
Muito fofo ^^v
Fofaaaa, muda lá nos seus afilados o meu link! em véz de Fairy Tales é r0ckerplace (o link esta no perfil) Por favor! :c
ResponderExcluirOii 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???
ResponderExcluirnahatscha.blogspot.com
amei esse efeito super lindo!
ResponderExcluirdiamonts-arent-forever.blogspot.com
Beijos
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!
ResponderExcluirdocefuturo.blogspot.com.br
Amei o efeito, muito lindo eu já tinha aprendido no tumblr, mas mesmo assim é bom aprender de novo :)
ResponderExcluir