20/06/2012

8

Elite afiliados com opacidade e zoom

Tumblr_li0buhzeyi1qfateqo1_500_large
Yoo, bananitas! Hoje trouxe um tutorial bem legal: Como colocar os seus afiliados com um efeito de zoom e opacidade ao passar o mouse! Experimente aqui nos afiliados do blog para ver como fica.
Lembrando que essa elite afiliados foi criada por mim, e só aprendi o efeito zoom no Cherry Bomb, créditos a ele. Então me credite se usar, beleza? Arigato :3
Vamos ao ~le tuto~! Clique em Mais!
Passo 1:
Vá em Modelo > Editar HTML > Prosseguir. Em seguida procure por ]]></b:skin> e coloque o código abaixo:

/*.................................Menu Afiliados - By Rebel Cinderella........................................................*/
.afiliados {
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
-webkit-transition: 0.5s;
border-radius:5px;
opacity: 0.8;
}
.afiliados:hover {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition: 0.5s;
border-radius:5px;
opacity: 1.0;
}
/*.................................Menu Afiliados - By Rebel Cinderella........................................................*/
Salve as alterações.

Passo 2:
Vá em Layout > Adicionar um Gadget > HTML/JavaScript.
Lá cole o código:
<center><a href="URL_AQUI" title="NOME_DO_BLOG"><img src="URL_DA_IMG" /></a>
Cada div dessa corresponde a uma imagem, então ponha esse código para cada afiliado que desejar, colocando a URL, o título que aparece ao passar o mouse e a url da imagem.
P.S.: Aconselho a usar uma imagem de tamanho 50 x 50 para ficar tudo certo.

Bem, é isso rebels, espero que tenham gostado da elite afiliados e do novo lay. 
Sayonara!

8 comentários:

  1. Esse efeito é bem legal, dá um charme para os afiliados! *-*
    Adorei esse seu lay, tá super Kawaii!
    Bjão!
    http://set-fire-in-the-deep.blogspot.com.br

    ResponderExcluir
  2. Esse efeito é muito lindo e diferente, quem sabe eu não use no próximo lay do RT? :D

    Seguindo aqui, viu? Adoraria te ver lá no meu blog. E se gostar não esqueça de seguir ><

    Beijos ♥
    Blog Refugio Teen - Fan page do blog, curte ;)

    ResponderExcluir
  3. Ótimo tuto, você usou muito bem as minhas dicas ;)
    Que coisa mais fofa que ficou seu novo lay *_* Amei as imagens do slide, Rin e Len são tão lindos!
    kissus
    Cherry Bomb || Fanpage

    ResponderExcluir
  4. Olá. Estou passando nos blogs para deixar um convite. Está rolando um super sorteio no Pudim Engorda, é uma nova coleção com 30 esmaltes perfeitos. Muito bom né?
    Venha participar!
    http://pudimengorda.blogspot.com.br/2012/06/sorteio-30-novos-esmaltes-pra-voce.html
    Beijos

    ResponderExcluir
  5. Fica lindo mesmo, um charme .

    girlsbrasileiras.blogspot.com

    ResponderExcluir
  6. TEM WEBSÉRIE NOVA GENTE XP!
    www.blackbloodwebserie.blogspot.com < WebSérie
    www.gabif-fernandes.blogspot.com < Meu Blog (Planet Of Dreams)

    Acessem ;D

    ResponderExcluir
  7. Gostei do tuto!! bem útil p/ mim!! querida, adorei seu blog... é td mt diwo aqui *u* vc está de parabéns o lay é lindo e o conteúdo é ótimo... e vc está de parabéns viu? estou seguindo aqui, quando tiver um tempinho passa lá no meu blog e se gostar seguir? obg pela atenção :3 bjs Ana Karoline via Morangos Despedaçados.

    http://morangosdespedacados.blogspot.com/

    ResponderExcluir
  8. Esse blog é lindo d+!!
    Super, mega, hiper fofo*-*
    E o conteúdo é perfeito!
    Http://adolecenciasos.blogspot.com

    ResponderExcluir