17 de jul de 2013

Elite de Afiliados com Zoom


Yoo minna !!! Tudo bem com vocês ? Quero me desculpar por ter sumido nestes dias, pois o meu curso é quase todas os dias. Realmente minhas férias estão muito puxadas -.- . Bem, hoje eu trouxe para vocês um efeito que eu uso nos meus afiliados e acho bastante legal. Confira:



1. Procure por ]]></b:skin> e acima dele cole:

.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;
}



ENTENDA:

-moz-border-radius: 2px;
-webkit-border-radius: 2px;

Essa parte corresponde a borda arredondada. Caso queira deixar mais ou menos arredondada, basta alterar o valor.

~♥~♥~♥~♥~♥~

-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;

Corresponde ao tempo que a imagem demora para aumentar.

~♥~♥~♥~♥~♥~

background-color: #e7a5de;

Cor da borda sem o mouse por cima.

~♥~♥~♥~♥~♥~

-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
O quanto a imagem vai crescer. Aumente se quiser que ela fique maior ainda ou diminua.

~♥~♥~♥~♥~♥~

background-color: #c4a6cb;

Cor da borda com o mouse por cima.

~♥~♥~♥~♥~♥~

padding: 3px;

Existem três desse no código. O primeiro define o tamanho da borda sem o mouse e o segundo com.


2. Para colocar na sua elite de afiliados, basta adicionar um gadget HTML/JavaScript e colocar o código abaixo:

<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>
Créditos:

4 comentários: