Tutorial: Efeito Single

Oiie!

Boa tarde pessoal ^~^

Antes do post começar, queria dar uma aviso. NÃO troquem os cabeçalhos dos seus blogs. O sistema do blogger está com erro, e qualquer coisa com fundo transparente não está funcionando. Sei disso por experiência própria, já que fui mudar o cabeçalho do blog de previews... mas ele ficou com o fundo preto :/

Hoje eu trouxe um tutorialzinho básico, já que faz um tempo que isso não ocorre aqui no blog.

Ele é do blog Chovendo Diamantes e é um efeito muito legal chamado "Efeito Single".

PREVIEW

Agora, bora aprender?

No HTML, procure por:

]]></b:skin>

Acima, 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;

}

Salve, agora adicione um gadget com este código:

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

Mude o que está em negrito e vá colocando quantos for preciso depois salve.

Bom, é isso.

Espero que gostem e usem ^^

Beijoos!