Tutorial - Efeito do gadget "Quem Somos"

 

Oi, pessoal.

Trouxe mais outro tutorial de um gadget do nosso novo template, sabem que eu não gosto de esconder nada e sempre que uso algum efeito novo, vocês perguntam. Este aqui eu peguei do tumblr, mas o que eu havia encontrado, infelizmente está desativado. Sorte a minha que tenho os códigos aplicados nesse template, então pude pegar.

O tutorial tem códigos extensos, mas é super simples. Vocês são vão precisar colar códigos e depois substituir com suas próprias configurações, nada mais. Qualquer complicação que tenham, me perguntem e eu resolvo o mais rápido que puder.

1. Primeiro iremos configurar o seu gadget com efeito. Vá até editar HTML e procure por ]]></b:skin>, acima do código encontrado, cole:

.eff{

width:100px;

height:100px;

position:relative;

overflow:hidden;

float:left;

display:inline;

margin-right:10px;

margin-top:10px;

margin-left:10px;

font-size:14px;

background:#e3e3e3;

border:2px solid #797979;

}

.eff img {

display:block;

width:106px;

height:106px;

text-decoration:none;

border:0px solid #666;

background:#f8c2d9;

position:absolute;

z-index:500;

cursor:pointer;

cursor:hand;

}

.eff.caption {

position:absolute;

z-index:0;

color:#000;

display:block;

width: 160px;

margin-top: 5px;

text-align: center;

}

.eff .caption a.header{

margin:10% 5px 5px 5px;

display:block;

font-size:19px;

font-weight:700;

color:#db8ead;

font-family: Play;

text-align:center;

background:#fff;

}

.eff .caption p {

margin: 3px;

float:center; 

text-align:center;

font-family: Silkscreen; 

font-size: 8px; 

background: #fff; 

width: 45px; 

padding:1px; 

border-radius: 3px; 

display:inline-block;

} 

.eff .caption p a { 

color: #a1cbe6;

} 

.clear{

clear:both

}

/*

     FILE ARCHIVED ON 04:01:35 Nov 29, 2014 AND RETRIEVED FROM THE

     INTERNET ARCHIVE ON 19:55:07 May 10, 2024.

     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.

     SECTION 108(a)(3)).

*/

/*

playback timings (ms):

  captures_list: 0.714

  exclusion.robots: 0.081

  exclusion.robots.policy: 0.07

  esindex: 0.009

  cdx.remote: 5.891

  LoadShardBlock: 43.786 (3)

  PetaboxLoader3.datanode: 62.554 (4)

  load_resource: 138.27

  PetaboxLoader3.resolve: 105.93

*/

Como podem ver, ele é bem extenso. Não posso explicar cada parte, mas vou dar-lhes as informações mais importantes.

width:100px;

height:100px;

Largura e altura das imagens, respectivamente.

margin-right, top e left

Definem o espaço entre a imagem e a direita do gadget, o top e a esquerda.

font-size:14px;

background:#e3e3e3;

border:2px solid #797979;

Tamanho da fonte de onde está o nome da pessoa ou qualquer outra coisa, a cor do fundo da caixinha, a espessura, tipo e cor da borda.

Estes são os mais importantes, o resto vocês aprendem "futucando".

2. Depois disso você irá salvar e criar um gadget de HTML/JavaScript, nele cole o código abaixo:

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/EBwm3o3xm/jquery-1.4.min.js"></script>

<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/cndm3o3wy/jquery.easing.1.3.js"></script>

<script>

$(document).ready(function() {

//if mouse over and mouse out

$('.eff').hover(

function () {

value = $(this).find('img').outerHeight() * -1;

//for left/right if you have different width and height, 

//commented out because we are using up/down in this example

//value = $(this).find('img').outerWidth() * -1); 

//animate the image

// you can change the sliding direction by changing bottom to left, right or top

// if you changed this, you will have to change the position of the hover out as well

$(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});

},

function () {

//reset the image

// the position property (bottom), it must be same with the on in the mouseover

$(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});

});

//if user clicked on the thumbnail

$('.eff').click(function () {

//grab and execute the first link in the thumbnail

window.location = $(this).find('a:first').attr('href');

});

});

</script>

<div class="eff"> 

<img src="LINK DA SUA IMAGEM" /> 

<div class="caption">

<a href="link" class="header">NOME DA PESSOA</a> 

<center><p> <a href="LINK1">NOME DO LINK 1</a></p>  

<p><a href="LINK 2">NOME DO LINK 2</a></p>  

<p><a href="LINK 3">NOME DO LINK 3</a></p> </center> </div>

 Observe que até </script> o código não deve ser modificado. A parte que vocês devem mudar, virá depois dessa tag. Espero que tenha dado tudo certo.