9.2.13

Efeito single para afiliados



Bom noite!

Já estou com uma pessoa em mente para ser a postadora, mas como ainda não decidi se colocarei 1 ou 2 para postarem aqui, deixei o post lá ainda. Espero que isso realmente dê certo, já que sempre tive receio em relação a colocar postadores aqui.

Hoje eu trouxe um efeito para ser usado em elites de afiliados. Obviamente, se você quiser não precisa usar em elites apenas, pode ser colocado em diversos lugares no seu blog. Pela primeira vez, para fazer ele usei Keyframe. Eu aprendi a usar em um tutorial explicando tudo no HTMLuv, e a partir dele criei meu código. Na preview eu coloquei 3 tipos diferentes de imagens.  Dá a impressão de que são efeitos diferentes, mas na verdade é só a imagem.



Procure por ]]></b:skin> e 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;
}


Não há nem o que explicar dessa vez. O código é mais ou menos pequeno, e nele só tem o que é necessário para o efeito funcionar, então não precisa mexer em nada. Depois, adicione um gadget de HTML/Javascript e cole:


<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="bb" /></a>
Vá adicionando o código acima quantas vezes quiser, para a quantidade de imagens que quiser.
Pronto! O efeito é super fácil e o código é bem pequeno (milagre) já que a maioria dos efeitos que faço o código acaba ficando um monstro gigante. Confesso que gostei de trabalhar com keyframe, e recomendo pra todo mundo. É bem fácil e prático.

Espero que tenham gostado. Beijos ♥

15 comentários:

  1. o efeito não funcionou na preview aqui o/
    :(
    acervo-de-livros.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade, acabei de atualizar a preview e o tutorial. Obrigada *-*

      Excluir
  2. Que lindooow ;3 Vou usar no próximo layout!
    blog-censored.blogspot.com

    ResponderExcluir
  3. Muito legal, gostei !
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  4. Bárbara, pode postar o tutorial do efeito que você usava no layout free da boo, aquele que a imagem se abre pra cá < e pra lá >

    ResponderExcluir
  5. O efeito é lindo! Pode ensinar o efeito dos seus afiliados deste layout ?
    Kisses, CAT GIRL

    ResponderExcluir
  6. Aaaaaaah, se eu não tivesse com um efeito nos meus afiliados =/ Amei o efeito, perfeito demaaaais! Você quem fez? *--* Kisses!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  7. Amei esse efeito.
    http://sorvete-de-limao.blogspot.com.br

    ResponderExcluir
  8. Muito legal fica os afiliados
    nunca tinha visto esse efeito!
    http://manguitarosa.blogspot.com.br/
    beijooos

    ResponderExcluir
  9. Que lindo! Nunca tinha visto!!
    Se gostar segue?
    garotadabolsa.blogspot.com

    ResponderExcluir
  10. Muito bom o tutorial,o efeito fica muito Legal ;)... Beijos...
    Amei seu blog ele é muito lindo...Seguindo... :3
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  11. Oii, sou Isis Maria do blog: Book of Isis (http://book-of-isis.blogspot.com.br/).
    Amei o seu blog, super-seguindo :D
    Segue o meu pfr <3 e vamos, nos afiliar??


    Bjo e sucessos!
    Comenta lá no blog, a sua confirmação :D
    Book of Isis / http://book-of-isis.blogspot.com.br/

    ResponderExcluir
  12. Ajudou demais flor , valeu
    miss-teensami.blogspot.com

    ResponderExcluir