Nesse tutorial vocês vão aprender a deixar seus afiliados com efeito de zoom e com hover nas bordas que aprendi no Kawaii World e já uso há um tempão aqui no blog. Lets go?
Primeiro vá em editar html e com f3 (ou ctrl+f) 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;
}
Entendendo o código :
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
Aumento o número se quiser que a borda fique ainda mais arredondada.
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
Aumente se quiser que demore mais até a imagem 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 se quiser algo mais sutil.
background-color: #c4a6cb;
Cor da borda com o mouse por cima.
padding: 3px;
Nota-se que existem dois desses dentro do código. O primeiro define o tamanho da borda sem o mouse e o segundo com.
Essa parte acima do entendendo o código foi totalmente copiada.
Visualize, se estiver tudo certo salve!
Agora em um gadget/html cole o código abaixo :
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>
Acho que já para entender o código acima então tchauzinho!
Olha amei o tuto (:
ResponderExcluirBom, eu aceito afiliação sim já vou colocar vc lá coloca eu ai ... e só não vou me escrever para se sua postadora porque tenho muitos blogs para postar ai fica dificil para mim ^^
OOi Gabi, adorei seu cantinho, super meigo!!! Não imaginava que era tão fácil assim, muito bom o tuto... Seguindo aqui!
ResponderExcluirBeijinhos Bi
http://www.janeladela.blogspot.com.br/
Obrigadoo Bianca!Acabei de visitar seu blog, muito boom parabéns :)
ExcluirMeu emeil é semprebella469@hotmail.com
ResponderExcluirou vc fala comigo pelo facebook: Grasii Souza
Ok!
ExcluirOi amor, comenta nesse post aqui? Preciso da opinião de vocês. Conto com sua ajuda, obrigada!
ResponderExcluirClaroo!Já estou indo...
Excluir