Tutorial - Efeito Becky

Boa noite amores :3

Me pediram pela Ask á um tempinho, pra eu postar o tuto do efeito que eu uso atualmente nas autoras. Ele se chama efeito Becky.  Eu acho ele bem lindinho, e mega fácil de fazer.

Aaah, e obrigada pelos 224 seguidores gente, to muuuito feliz :D

Vamos ver :)

Exemplo do efeito:

Ctrl + F e procure por: 

]]></b:skin>

Quando achar cole o seguinte código ACIMA da tag:

imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;}

nome2 {position: absolute; display: block; width: 300px; height: 30px;

top: 30px; margin-left: -20px; opacity: 0; text-align: center; color:#A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px; font-family: 'play'}

imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}

Negrito - Cor da borda

Itálico - Cor da fonte

Sublinhado - Cor do fundo

Agora para usar vai em Layout > Adicionar Gadget > HTML/JavaScript

<a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>

E ajuste o tamanho da imagem que irá ter.

Créditos ao We Heart HTML ^-^

É isso pessoal, kissus, e até mais u3u