Tutorial:Efeito bate-bate nos afiliados

Olaa docinhoos como vão? bem hoje eu vou dar um tutorial bem simples efeito bate-bate nos afiliados eu peguei do Creative things e eu decidi compartilhar esse tutorial para vocês.
1.Click em modelo >> Editar html.
2.Logo terá uma tag assim:

3.Click nesses três pontinhos.Vai aparecer milhões de códigos e tem que achar apenas um tipo esse.
]]></b:skin>
4.E quando achar essa tag cole acima dela esse seguinte código:
@-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.E se tiver tudo certo salve.
6.E depois vá em layout  e vá em: HTM/JAVASCRIPT e cole esse código:
<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 seu afiliado
Link da imagem: Link da sua imagem

2 comentários:

  1. Esse efeito é fofo e o tutorial está bem explicado. Gostei do post >3<

    [♡] s u c k  s u g a r [/♡]

    ResponderExcluir
    Respostas
    1. Obrigado por, visitar meu blog ♡ beijos Andressa-chan

      Excluir

✔Podem comentar oque quiser os comentários não são moderados.
✖ Não pegar nada daqui sem botar os créditos
✔Críticas construtivas são sempre bem-vindas.
✖ Não xingar a dona do blog e os leitores que vão comentar.
✔Podem dar sugestões de posts mas isso é só na nossa ask!
✔Os comentários são sempre respondidos
✔Aceito afiliações clique nesse link aqui para pedir para ser afiliado

Alguns kaomojis e enfeites para seus comentários:♥ ♡ ♩♫♭♪♬ (∩˃o˂∩) (≧∇≦) ~ヾ(^∇^) (ノಠ益ಠ)ノ彡┻━┻ ┬──┬ ノ( ゜-゜ノ) ಠ_ಠ ( ̄。 ̄)~zzz ʘ‿ʘ ಥ⌣ಥ (づ。◕‿‿◕。)づ ヽ(゜∇゜)ノ∑(゜Д゜;) (´・ω・`)( ;´Д`)┐(‘~`;)┌ ( ゚д゚) ☜(⌒▽⌒)☞ (ノ◕ヮ◕)ノ*:・゚✧ ( ・_・)ノ⌒●~* ヽ(*´∀`)人(´∀`*)ノ (`・ω・´)9 (;一_一) ( ̄▽ ̄) ( ͡° ͜ʖ ͡°) (◡﹏◡✿) (⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (⊙‿⊙✿) (⊙︿⊙✿) (⊙△⊙✿) (◡△◡✿) (◕△◕✿) (◠△◠✿) (◕ω◕✿) (⊙ω⊙✿) (◡ω◡✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) ★~(◡‿◡✿) ★~(◠‿◕✿) (◡△◡✿) (ノ◕ヮ◕)ノ (ノ◕ω◕)ノ ヽ(゜∇゜)ノ (´・ω・`) ∩(︶▽︶)∩ ( ´ ▽ ` )ノ (・∀・ ) ( ̄(エ) ̄) (✪㉨✪)(╹ェ╹)╮(─▽─)╭ (•⊙ω⊙•) ( ´∀`)☆ (≧ω≦) ( ^▽^ ) (✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (≧◡≦) (¬_¬) (◑‿◐) ✖‿✖ (╥_╥) (╯3╰) (¬‿¬)
(∪ ◡ ∪) (≧ω≦) o(≧o≦)o (─‿‿─) (︶︹︺) (∩︵∩) (。◕‿◕。) (~ ̄▽ ̄)~ (︶ω︶)