25 de dez de 2012

1

Tutorial- Elite de afiliados com zoom

嗨女孩-oi meninas
383415_320336798064491_1268052239_n_large
Hoje eu trouxe um tutu para quem quer ter uma elite de afiliados igual a minha,
Ela é em hover e tem meio que um efeito zoom.
Visualize Aqui



1.Vá em Design- Editar Html
Procure por ]]></b:skin>
E acima dele cole:

/*Afiliados com efeito Zoom*/
.elitescale{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
background-color: #e7a5de; 
padding: 3px;
}
.elitescale:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #c4a6cb; 
padding: 3px;
}
/*Afiliados com efeito Zoom*/




Entendendo o código:

Em Verde:
Aumente o número se quiser que a borda fique ainda mais arredondada.
Em Azul:
Aumente se quiser que demore mais para a imagem aumentar.
 
Em Rosa:
Cor da borda sem o mouse .

Em Laranja:
O quanto a imagem vai crescer. Aumente se quiser que ela fique maior  ou diminua se quiser algo menos chamativo.

Em Lilás
Cor da borda com o mouse.

 
Em Vermelho:
Existem dois desses dentro do código, o primeiro define o tamanho da borda sem o mouse e o segundo com.

2. Vá em Layout-Adicionar um Gadget-Html/JavaScript
Cole o seguinte código
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>
Edite a seu gosto.
Espero que tenham gostado, qualquer dúvida escreva aqui em baixo!
Kissi

Um comentário:

Carolina e Camila disse... Best Blogger TipsAnswerBest Blogger Templates

Amei muito util para meu novo lay bjs vou usar