Hoy cupcakes! Então, eu sou a Sofia, eu tô cuidando do blog por um tempo, então esse meu primeiro post como supervisora do blog. E como tutus são muito bons, eu preparei um tutorial bem legal.
1.Autores com efeito Hover
Sabe, em alguns blogs a mais de uma pessoa publicando ou outra coisa,sei lá, e queremos que os leitores vejam quem são eles. E hoje vou ensinar como fazer isso. Vamos começar!
Escolha uma dessas imagens, ou crie uma própria 100 x 100
As imagens normais, sem efeito, edite elas no seu editor de imagens ou até mesmo no Paint, colocando o nome do postador.
Vá em Modelo + Editar HTMl e procure por essa tag:
]]></b:skin> e cole o código abaixo em cima da tag que você achou:
.postador1 { background: transparent url('URL DA IMAGEM') no-repeat bottom center; width: 100px; height: 100px; margin-left: 0px;transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}.postador1:hover { background: transparent url('URL DA IMAGEM') no-repeat top center; width: 100px; height: 100px;transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;}
Nos dois "URL DA IMAGEM" você deve por o URL da imagem que escolheu iguais.Para o efeito aparecer crie um gadget HTML/JavaScript e cole o código abaixo:
<a href="LINK DO BLOG"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="200px" width="200px" class="postador1" /></a>
Faça as seguintes alterações:Onde está escrito "LINK DO BLOG" você pode colocar o Twitter ou blog do seu postador, e aonde está escrito "postador1" coloque o número do seu postador. E se quiser colocar mais postadores você terá que repetir o código HTML/JavaScript
Se tiverem alguma dúvida, deixe-a nos comentários.
~Kissus amoras~
Créditos:[www]
Adorei o tutorial,bem fácil.
ResponderExcluirPena,que eu não tenho postadoras no meu blog :/
Mais quando eu tiver vou usar esse tutorial hihi.
bjs
visita? se gostar segue!
w w w . supercaprichada . c o m . b r
Ah,que pena !
Excluir