.
Image Map

09 janeiro, 2013

Tutorial - Efeito Spin

Alice obrigada por você está divulgando o twitter do meu blog. Alice posso começar a postar todas as quartas feiras?


Ooie pessoal, como vocês estão? Então, eu estava conversando com a Alice(dona do blog), e agora eu não mais somente a postadora do blog, agora eu serei a mais nova moderadora do EM.
Então, como as minhas tags aqui são tutoriais e layouts frees, hoje eu vou postar um tutorial, pois a pouco tempo postei um layout free. Não lembro se eu postei ele aqui, mas se não postei aqui, vocês podem entrar no meu blog, e usarem ele, se quiser ir lá, clique aqui.
Mas, mudando loucamente de assunto, o tutorial que eu irei mostrar para vocês hoje, é um tutorial de personalização da elite de afiliados. Este tutorial eu encontrei no blog Have Things o efeito original é do tumblr WorldDesigns, mas a adaptação para o blog é da blogueira do Have Things. Este é um tutorial que é bem fácil de fazer, e deixa sua elite bem mais bonitinha.
Para todos os efeito está aqui a Live Preview.
Bem fofo não?
Enfim, vamos aprender a fazer?
 Clique em Mais Informações e aprenda! Uhul!

1ºPASSO: Vá em seu HTML, e procure pela tag:
]]></b:skin>
Acima desta tag, você irá colar:
#spineffect
{-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
#spineffect:hover
{-webkit-animation-name: spin;
-webkit-animation-duration: 400ms;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;}
@-webkit-keyframes spin
{from {opacity: .99;
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-moz-transform: rotate(0deg);}
to {opacity: .30;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-moz-transform: rotate(360deg);}}
Obs : Não é necessário editar nada nesta parte.
2º PASSO: Adicione um HTML/JavaScript e nele cole assim:
 <a href="Linl"><img src="Link da Imagem" id="spineffect"></a>

3º PASSO: Salve e pronto.

Espero que vocês tenham gostado, pois eu amei.
Beijos

15 comentários:

  1. Legal esse tutorial! Bem fácil!
    http://anonimajaqueenjoasereu.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também achei super legal e também bem fácil!
      Obrigada por comentar, viu?!

      Um beijão!
      Alice, dona do blog EM.

      Excluir
  2. Muito legal eu amei.
    Bjoos
    Seguindo aquie segue lá ?
    http//bombasticmusics.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu também!
      Obrigada por comentar viu!?

      Sigo se gostar, ok flor?
      Beijões!
      Alice, dona do blog EM.

      Excluir
  3. Gostei bastante do tutorial !!!!

    Beijos linda !!

    http://blogduranteosquinze.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom, viu?!
      Obrigada por comentar!

      Beijões!
      Alice, dona do blog EM.

      Excluir
  4. Que legal, adorei o tutorial!
    Beijos.


    http://esfriouocafe.blogspot.com.br/
    https://www.facebook.com/blogesfriouocafe

    ResponderExcluir
    Respostas
    1. Eu também!
      Obrigada por comentar viu!?

      Beijões!
      Alice, dona do blog EM.

      Excluir
  5. Que gato lindo s2

    vim te convidar para conhecer o meu :D

    Quer seguir o meu que eu sigo o seu?

    danyelleoliveiraa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também achei, amo gatos! Own *-*
      Obrigada por comentar viu!?

      Sigo se gostar, ok flor?
      Beijões!
      Alice, dona do blog EM.

      Excluir