♦ Tutorial ~ Efeito Postadores

 Hey Rilakkumas

  Desculpa aê pessoal, eu estava sumido pois estava me preparando para uma feira de ciências regional que aconteceu por aqui, eu tive que estudar bastante para apresentar meu projeto. Então desculpa. E como vocês já sabem a Lovelly vai passar um tempinho ausente. Espero que ela esteja bem.

 Mas agora eu trago um tutorial do efeito postadores que me pediram a um tempinho e eu me esqueci de postar, mas agora me pediram novamente e eu trago para vocês, mas digo logo, não é tão simples assim.

 Então vamos logo aprender esse efeito? Pois o tutorial é meio grandinho.

EXEMPLO: Normal e Hover

1º temos que criar a imagem, ela tem que ser 200 de altura por 100 de largura. 

A parte de baixo é a que ira aparecer e a de cima apenas quando passar o mouse.

Aqui algumas imagens para vocês saberem como deve ser, podem usar.

Precisam colocar o nome que quiserem nessa barrinha colorida.

--------------//---------------

2ª Abra um novo gadget HTML/JavaScript e cole esse código.

<a href="LINK DO BLOG"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" height="200px" width="200px" class="postador1" /></a>

Não aconteceu nada certo? Tudo bem, é para ser assim mesmo.

Coloque logo o link do blog, facebook ou qualquer outro site

--------------//---------------

3º Vá em

 Modelo >> Personalizar >> Avançado >> Adicionar CSS

E cole esse código.

.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;}

Agora coloque a URL da imagem que você irá usar onde se pede.

Percebeu que agora você consegue visualizar o efeito? Quer dizer que você fez tudo certinho.

Se você quer adicionar mais imagens, repita todo o tutorial, mas dessa vez, onde estiver postador1 troque por postador2. E se for adicionar outra, troque por postador3 e assim em diante para cada nova imagem

Espero ter explicado bem e até depois.