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">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.
<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>
Prontinho! Espero que tenham gostado do tutorial. Beijos e até mais!
Que lindo esse efeito, adorei :3
ResponderExcluirMuito cute seu blog Ingrid, estou seguindo!
Beijão <3
crazyforhtml.blogspot.com
Obrigada, Luanne. Beijos1
ExcluirAdorei esse efeito e ameiii o seu blog :D
ResponderExcluirBjinhosss Buuh
Momento Paparazzy
Obrigada!!!
ExcluirAmei o efeito, muito lindo!
ResponderExcluirQue saudaades Ingrid! *--*
Beeeijos
brilhan-tina.blogspot.com
Ps.: mudei a url se puder mudar na elite agradeço :D
Obrigada Tina! Saudades mesmo, estava louca para o seu blog abrir de novo *---* Mudo sim! Beijos!!!
ExcluirObrigada! Claro! Beijos
ResponderExcluir