14/08/2012

Efeito na Elite Afiliados + Imagens (50X50)

Hello *-* Nesse novo Layout do Blog, eu tava afim de criar alguma coisa nova, algo diferente que eu pudesse passar para vocês. Foi ai que eu resolvi "inventar" um efeito legal na Elite Afiliados do Blog. Gostei bastante do resultado e cá estou eu aqui para postar o Tutorial desse efeito para vocês.
Bom, pra quem ainda não viu, o Efeito é esse:


Bom, para que o efeito funcione, você precisa adicionar o Código no HTML do seu Blog. Para isso, vá em Design - Editar HTML - Ctrl+F e Pesquise por ]]></b:skin> 
Quando achar, cole o código abaixo, em cima do que você encontrou:
.elitepom {
-webkit-transition: opacity 0.8s linear;
opacity: 0.6;
margin: 1px 4px 0 0;
padding: 2px;
background: url ("URLDOPATTERN1");
transition:all 0.8s linear;
-moz-transition:all 0.8s linear;
-webkit-transition:all 0.8s linear;
-o-transition:all 0.8s linear;
}
.elitepom:hover {
-webkit-transition: opacity 0.8s linear;
opacity: 1;
background: url ("URLDOPATTERN2");
transition:all 0.8s linear;
-moz-transition:all 0.8s linear;
-webkit-transition:all 0.8s linear;
-o-transition:all 0.8s linear;
}
Colou? Não se esqueça de fazer as devidas alterações ok? Pois bem! Agora adicione um Gadget no seu Blog de HTML/JavaScript e nele, cole o código que segue com as devidas modificações:
<a href="URLDOBLOG" title="NOMEDOBLOG"><img class="elitepom" src="URLDAIMAGEM" /></a>
Bom, pra completar, eu trouxe algumas imagens para Elife Afiliados de vocês. São diversas, algumas da Demi, da Selena, Katy e Taylor Swift. Não se esqueçam de creditar se usarem algum desses conteúdos ok?






E ai, gostaram? Eu adorei o efeito, e as imagens são todas do WeHeartIt e editadas por mim ok? Beijão!

36 comentários:

  1. Adoreei, o efeito é muito massa !! ótimo tutorial :D

    http://alittlemorethangloss.blogspot.com.br/

    bjs !!

    ResponderExcluir
  2. Perfeito o efeito. Muitas lindas as imagens.
    Abraço ~>http://prince-teen.blogspot.com.br/

    ResponderExcluir
  3. amei as imagens e amei o efeito, o problema é que eu não tenho afiliados hahahaha!! portanto nem serve pra mim. O seu blog é lindo! sucesso!
    candyces.blogspot.com

    ResponderExcluir
  4. Amei o tutorial, esse efeito na elite ficou lindo *-* E o novo lay tambem,arrasou!
    Ah! Já estou seguindo aqui,poderia seguir o meu tambem? Estarei te esperando lá :)
    http://blog-as-poderosas.blogspot.com

    ResponderExcluir
  5. O efeito ficou demais!
    http://ladyalen.blogspot.com

    ResponderExcluir
  6. Super útil esse tuto né? Adorei todas as imagens eu peguei algumas tá?!

    http://jovenclube.blogspot.com.br

    ResponderExcluir
  7. Amei o efeito,ficou muito divo e os icons estão lindos *-*
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  8. Ah, aprovei muito o efeito! Ficou ótimo, e com você explicando, fácil de entender! As imagens ficaram ótimas e lindas, arrasou no tutorial de hoje. Alex, essa foto de início de post é linda, amei! Um beijo.
    the-zombie-attack.blogspot.com

    ResponderExcluir
  9. Que lindo esse efeito ! Pena que mudei de layout há pouco tempo, mas já favoritei e pretendo usar no meu próximo ^^ Esse seu layout ficou perfeito ! Adorei as cores, vc tem muuito talento [:

    # >>> candycherry-official.blogspot.com

    ResponderExcluir
  10. Que lindo o efeito, nunca vi um igual! Ficou lindo, parabéns!!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  11. Adorei o efeito, super fofo no próximo lay acho que vou usar !

    http://garotadifferente.blogspot.com

    ResponderExcluir
  12. Amei o tutorial , o resultado fica muuito fofo =]

    Beijos

    http://ojustbehappy.blogspot.com.br/

    ResponderExcluir
  13. nossa muito legal ese efeito,simples e bonitinho...
    http://www.camilacardozo.com/

    ResponderExcluir
  14. Adorei o resultado Alex, na boa, para de ser perfeito! Para tá? tem novidade lá no AH, vê lá? <3

    advanced-html.blogspot.com

    ResponderExcluir
  15. BABANDO >.< Muito fofis --
    -->http://smileretro.blogspot.com.br/
    Obrigada por aceitar cer afiliado :D

    ResponderExcluir
  16. Gostei do tutorial!
    Adorei as imagens da minha diva Miley! *-*

    Obrigada pela sua visita, ela é muito importante pra mim viu? Volte sempre amore♥
    Blog
    Sorteio-Anel Laço

    ResponderExcluir
  17. AAAAAAAAAAAh!Chorei Glitter com esse novo layout!!!
    PERFEITO!

    BJS
    http://quinzederrepente.blogspot.com.br/

    ResponderExcluir
  18. Vlw, Alex ^.^
    aqui ta d+, aceito sim o pedido de afiliação, já te coloquei .

    ResponderExcluir
  19. Olá x)

    Eu já tinha visto vários efeitos para afiliados, mas este nunca tinha visto, achei ele muito interessante *3* talvez eu use ele no próximo lay do meu blog \z \z

    Bye~
    http://roseof-pain.blogspot.com/

    ResponderExcluir
  20. O efeito é super lindo *-*!
    O teu blog é perfeito :) adoro!já sigo *w*.
    Bjs Connie,
    http://bubble-explosion.blogspot.pt/

    ResponderExcluir
  21. Esse efeito na elite ficou super lindo! Você que fez? Quanta criatividade. Eu até colocaria desse jeito no meu blog, com as imagens e tal, mas não me acerto com esse tipo de elite :/

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  22. Incrível esse efeito. Alex Garotas de Porcelana já mudou de nome virou Ironic Land, estou passando aqui para que possa mudar na elite afiliados, um beijo e obrigada por tudo.

    http://ironic-land.blogspot.com.br/

    ResponderExcluir
  23. Ótimo tutorial, vou colocar esse efeito no meu próximo layout.

    Obrigado pela visitinha, aqui também é lindo!

    Beijinhos!

    http://gotta-be-you-blog.blogspot.com.br

    ResponderExcluir
  24. Super legal, talvez eu use no próximo layout do <a href="http://bangteen.blogspot.com>Bang Teen</a>

    ResponderExcluir
  25. Adorei! Primeira vez e estou seguindo. Vai direto pro meu blogroll haha.
    http://md-alternativo.blogspot.com.br/

    ResponderExcluir
  26. meu blog lindo? ta cego? aqui que é perfeito adorei o blog,visito desde o 1 lay sério *O* adoro tudo nele parabens Alek!

    ResponderExcluir
  27. Ainda não tinha vindo aqui depois da troca e Alex, que layout maravilhoso é esse? *0* Você se supera a cada lay viu, um mais lindo que o outro.
    E esse estilo de elite você mesmo que criou? Mega lindo *-* Vou ver se uso no próximo lay do QD!

    Super beijo <3
    http://quinzedilemas.blogspot.com.br/

    ResponderExcluir
  28. Esse efeito ficou lindo Alex! *o*
    Adorei as imagens, mesmo não sendo do tamanho das que eu uso na minha Elite Afiliados :( ...salvei as da Tay *u*
    Xeru.

    ResponderExcluir
  29. Efeito perfeito, vou usar com certeza em algum layout. Você mesmo que criou? Nossa, que criatividade, ficou bem especial mesmo.
    Smach:3 | http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  30. Que efeito mais divo!
    Amei, ainda mais com as fotos da minha Miley no exemplo ♥
    Vou ver se eu uso em algum layout futuro, rs.


    / maseusoumeiga.blogspot.com

    ResponderExcluir
  31. me desculpa mas eu não sei o que colocar na parte do PATTERN???
    alguém me dá uma luz
    Sckitty World

    ResponderExcluir
  32. Amei,usei o tutorial e creditando claro :3
    http://booksenutella . blogspot . com . br/

    ResponderExcluir