Efeito fofinho (Bordinha Hover) para afiliados ♥

Oii, doces de rilakkuma ♥

Hoje eu vim aqui para trazer um tutorial bem fácinho e bem fofinho que eu utilizo aqui no meu blog. É o efeito para afiliados :) vamos conferir? Para ver o efeito para afiliados (clique aqui) e procure pelo nome Bordinha Hover.

Bom, primeiramente é recomendável fazer o backup do seu blog. Depois disso entre no seu html e procure pela divina tag ]]></b:skin> e ACIMA dela cole o seguinte código abaixo:

/* COMEÇO DO CÓDIGO DA BORDINHA HOVER */
.efeitoborder{
border: 2px solid #F79DD0;
cursor: crosshair;
border-radius: 15px;
-webkit-transition-duration: 150s;
}
.efeitoborder:hover{
border: 1px dotted #967EC4;
cursor: crosshair;
border-radius: 20px;
-webkit-transition-duration: 150s;
 }
/* FIM DO CÓDIGO DA BORDINHA HOVER */

Eu acho que não precisa mudar nada no código acima, pois eu já deixei nas auterações necessárias, mais isso é do seu gosto. Pronto a parte do html já acabamos. Agora vamos para a parte prática: Fazer aparecer no nosso querido blog.

Adicione um gadget html/javascript e dentro dele cole:
 <a href="Link do blog" title="Nome do blog"><img class="efeitoborder" src="Link da imagem" /></a>
Agora é só você completar da maneira que tem no código. E seu efeitiinho ja está prontuu!! Fácil néh? Espero que tenham gostado. E os créditos vão para eu vi lá, mais o código não está igual ao de lá.. eu modifiquei um pouco e ficou bem melhor :)

25 beijinhos. Luana.

Um comentário: