Tutorial - Efeito gotinha

Hey meu amores! Como vão?

Não postei estes dias, pois não estava com ideias para post, mas hoje resolvi postar um tutorial, que é o Efeito Gotinha, veja ele aqui. Gostou? Vamos aprender a fazer?!

Lembrando que os créditos deste tutorial, vão para o blog Wonderland (blog divo)

Bom, vá em seu painel HTML, aperte Ctrl + F e procure por ]]></b:skin> 

Acima desta tag, cole o código abaixo:

.bordinha {

padding: 1px; /* espaçamento da borda */

border: 1px solid #dad0cf; /* cor da borda */

border-radius: 100px 100px 100px 100px;

-webkit-transition-duration: .80s;

}

.bordinha:hover {

padding: 1px;

border: 1px solid #dad0cf; /* cor da borda hover */

border-radius: 100px 100px 0px 100px; /* não mude */

opacity: 0.80; /* opacidade mais baixa, se não quiser apague */

-webkit-transition-duration: .80s;

}

Salve. Depois adicione um gadget HTML/Java Script e cole:

<center><a href="LINK AQUI" title="TÍTULO DA TOOLTIP"><img src="LINK DA IMAGEM" class="bordinha" /></a>

<a href="LINK AQUI" title="TÍTULO DA TOOLTIP"><img src="LINK DA IMAGEM" class="bordinha" /></a>

<a href="TÍTULO DA TOOLTIP" title="NOME"><img src="LINK DA IMAGEM" class="bordinha" /></a></center> 

Depois, faça as alterações necessárias, e salve!

Espero que este tutorial tenha sido bem útil, beijinhos!