23/01/2013

Tutu: Autores do Blog com efeito Hover


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


 b      








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]




2 comentários:

  1. Adorei o tutorial,bem fácil.
    Pena,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

    ResponderExcluir