Tutorial: Efeito Single

Hey!

Gente, cadê os comentários? Assim a tia Ráh fica triste... :P

O tutorial de hoje é o Efeito Single, para sua elite de afiliados.

 Ele é do blog Chovendo Diamantes, mas eu peguei os códigos no One Dí Things.

Live Preview

1- Vá em Editar HTML e procure por ]]></b:skin> acima dessa tag cole:

@-webkit-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-moz-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-o-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-ms-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
.bb{
padding:1px;
}
.bb:hover{
-webkit-animation: bubble 1s;
-moz-animation: bubble 1s;
-o-animation: bubble 1s;
-ms-animation: bubble 1s;
}

2- Salve. Vá em Layout > Adicionar Gadget > HTML/JavaScript e cole:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="bb" /></a>

Faça as alterações e prontinho.

Super fácil não? E fica tão lindo...

Até mais!