Image Map

25.1.13

Efeito para moderadores


Oi gente! Como vão? Hoje trouxe um tutorial para efeitos de moderadoras, ele é bom pra quem tem mais de uma pessoa na equipe do blog. Adaptei o código do tumblr para o blogger. Créditos do efeito para I-LoveThings, Lovers-Of-Desings E SpazioHTML.  Tenham uma prévia do efeito aqui.

Vamos pro tutorial?

Vá ate seu HTML, dê um Ctrl F e pesquise por ]]></b:skin> depois de achar o código, cole acima o seguinte:
/***** EFEITO MODERAS POR: I-LOVETHINGS, LOVERS-OF-DESIGNS E SPAZIOHTML (Adaptado para o blogger por Goods-Sweets)******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 116px; -webkit-transition-duration: .45s;}
.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;} 
 Em WIDHT: 116px você deve colocar a largura da sua imagem.

Agora você deve abrir um gadget de JavaScript e colar o seguinte:
<div class="efeito">
<a href="LINK"><img class="imagem" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="imagem" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="imagem" src="URL DA IMAGEM" /></a>
</div>
Onde tem "LINK" você vai colocar o link dá página do moderador(a) e onde tem "URL DA IMAGEM" você coloca o link da imagem que será utilizada.

Prontinho! Espero que tenham gostado do tutorial. Beijos e até mais!

7 comentários:

  1. Que lindo esse efeito, adorei :3
    Muito cute seu blog Ingrid, estou seguindo!

    Beijão <3
    crazyforhtml.blogspot.com

    ResponderExcluir
  2. Adorei esse efeito e ameiii o seu blog :D
    Bjinhosss Buuh
    Momento Paparazzy

    ResponderExcluir
  3. Amei o efeito, muito lindo!
    Que saudaades Ingrid! *--*
    Beeeijos
    brilhan-tina.blogspot.com
    Ps.: mudei a url se puder mudar na elite agradeço :D

    ResponderExcluir
    Respostas
    1. Obrigada Tina! Saudades mesmo, estava louca para o seu blog abrir de novo *---* Mudo sim! Beijos!!!

      Excluir