Imagem com efeito giratório

Oiiii meus xuxuzinhos do espaço depois de passar uma tarde inteira na casa da minha vó linda enchendo a barriga só de coisas boas preparadas por ela (devo ter engordado uns 10 quilos) hehe, vou ensinar vocês a fazerem o efeito das imagens igual dos afiliados aqui do blog..vamos ao tuto então!

A imagem gira ao passar o mouse

Exemplo (passe o mouse na imagem)


#Não uso mais o efeito

Esse código pode ser usado onde você quiser esse efeito, no meu caso usei na elite de afiliados.



Vá em design >Editar HTML > aperte Ctrl F e procure por ]]></b:skin>

depois que encontrar cole o código acima de  ]]></b:skin>
.rotate{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;}
.rotate:hover{-webkit-transform: rotate(
360deg);} 
Se não quer a imagem redondinha, diminua os números onde diz 50px
1.20s é o tempo, enquanto menor o número mais rápido a imagem gira
360deg é o grau de rotação

Certo agora Salve

Como o código funciona na imagem??

Vá em design  > Adicionar um gadget  > HTML/JavaScript


Use o código: 
Sem link:
<img src="URLdaIMAGEM" class="rotate">
 Com link:
<a href="URL"> <img src="LINK DA IMAGEM" class="rotate"></a>

Prontinho, é bem fácil né?! espero que tenham gostado 

14 comentários:

  1. Olá!

    Acredita, que vi esse tutorial em outros blogs e quando eu tentava colocar não dava certo! Somente depois de encontrar o seu, foi que consegui! Obrigada!

    Bjs

    daimaginacaoaescrita.blogspot.com

    ResponderExcluir
    Respostas
    1. Isso é verdade fui em uns quinhentos blogs e a imagem NUNCA ficava redonda e muito menos girava o seu é perfeito!

      Excluir
  2. Kaah, cê deve ler pensamento! Eu ameeei sua elite de afiliados, eu iria perguntar como vc fez na primeira oportunidade que eu tivesse <3
    I love muito seu blog >.<
    Bjao

    ResponderExcluir
    Respostas
    1. Kaakah, fui colocar no meu blog e não deu certo, queria saber como faz pra botar link nessa imagem giratória.

      Excluir
  3. Parabéns, seu blog é muito lindo viu ?
    mimada-menina.blogspot.com.br
    Já to seguindo !!!!!!
    aceita afiliação ?

    ResponderExcluir
  4. http://ericagirlfashion.blogspot.com.br/

    Lindo blog o seu, parabéns, um dia chego (aqui) lá!

    ResponderExcluir
  5. Aii muito obrigada, o ruim é que além da imagem dá tontura vc tem que colocar esse código em todas as imagens que quiser, se achar um que fique todas imagens dos post!

    amantesdemoda.blogspot.com.br

    ResponderExcluir
  6. Obrigada, proucurei muiito esse código. Muita luz para ti!

    ResponderExcluir
  7. Obrigada procurei muiiiito por esse código, só aqui consegui. Muita luz no seu coração!

    ResponderExcluir