Tutorial: Efeito bate-bate para afiliados

Oi leitores!

Como vão? Tomara que bem, bom eu usei o layout que eu fiz no meu blog de teste! E tipo... é legal! Eu gostei do meu lay! Espero que vocês tenham gostado! Bom, sem blá blá blás, hoje eu trouxe um tutorial de efeito para afiliados, que eu peguei no Kawaii Things, créditos a esse blog. Bom vamos ver? A Preview está aqui -> ✖✖✖

Vamos ver o Tutorial?

1. Click em Modelo >> Editar Html

2. Logo no início terá uma tag assim:

3. Click nesses três pontinhos. Vai abrir milhares de códigos, desça até achar:

]]></b:skin>

4. Quando achar essa tag, cole ACIMA dela esse código abaixo:

@-webkit-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-moz-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-o-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
.bate-bate{-webkit-transition: .7s; width:40px;
height:40px;border-radius: 5px;}
.bate-bate:hover {-webkit-animation: YO .7s alternate infinite linear;}
.fade:hover img {opacity:0.2;-webkit-transition: .7s;}
.fade img:hover{opacity:1.0;-webkit-transition: .7s;-webkit-filter:contrast(120%);
-moz-filter:contrast(120%);
-o-filter:contrast(120%);}

5. Salve. Agora vá para a aba Layout >> Adicionar um gadget >> HTML/JS
6. No Gadget que você acabou de abrir cole o código abaixo:

<div class="fade"><center><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a></center></div>

7.  URL : Link do blog
     Nome: Nome do afiliado
     Link da imagem: URL da imagem

8. Salve. Gostou do efeito? Se sim ou não, comente, queremos saber sua opnião. Qual quer dúvida ou erro comente *>*



-P4nda