♦ 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


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.
--------------//---------------


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
--------------//---------------


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.

17 comentários:

  1. Muito bom o tutorial XD Eu ia usar mas eu sou forever alone no meu blog (e tá bom assim) KSOPASKAOPKSAOPKSAOPSKOAPKSAOPSKASKOPSK
    Vc sabe que eu tenho o SL, mas lá eu fiz uma página mesmo de quem somos nós (agora só duas Ç.Ç) mas tá bom do jeito que tá (eu acho)...
    Não é tãoooo complicado assim SAKOPSAOPSKOSKKA só que é demorado pra fazer as imagens e colocar direitinho os negócios (e eu tenho quase 100% de certeza que eu vou fazer merda no tutorial mas okay KAOPSKAOSKOSKAOPKSOASASKAOSK)
    Kissus Kissus Byel-kun <3

    ResponderExcluir
    Respostas
    1. Valeu Miya.
      Que isso? Usa em outras coisas.
      Sim, fica bom assim na página, da para conhecer mais.
      Eu me lasquei umas 3 vezes antes de conseguir usar esse efeito.
      Você nao foi e nem sera a unica a fazer merda.

      Excluir
  2. OOOOO, VOU ROUBAR! KAKAKA! vou dar os créditos é claro.

    ResponderExcluir
  3. Fica muito legal! Acho que dá ate pra fazer menus ^^

    ResponderExcluir
    Respostas
    1. é sim, eu vejo um monte de tumblrs com menus desse efeito.
      Lembrou bem

      Excluir
  4. Legauuuuuuuuuu
    Acho que vou fazer isso no meu blog, quem sabe ^^
    E até que não é tão difícil assim, Byel, acho que o mais difícil é fazer/encontrar as imagens.
    Bjsss

    ResponderExcluir
    Respostas
    1. Obrigado.
      As imagens são realmente o pior.
      Mas o efeito é bem legal ^^

      Excluir
  5. Amei o blog, amei o tuto e amei o lay, que está perfeito!!! Parabéns pelo blog!!!
    bjs Ana

    ResponderExcluir
  6. Adorei o tuto, mas como coloca aquela barrinha na foto?

    ResponderExcluir
  7. muito legal mais eu não conseguir fazer, como faz aquela barrinha na foto?
    sereifelizz.blogspot.com.br

    ResponderExcluir
  8. Hua que fofura total *----* adorei o avatar do greel e claro, o tuturial <3

    ResponderExcluir
  9. Vou reblogar, mas vou dar os devidos créditos, okay?

    Beijoos

    http://kawaii-planeta.blogspot.com.br/

    ResponderExcluir
  10. eu uso esse tuto e as imagens também no meu blog (nunca acerto o tamaanho na hora de fazer eu mesma as imagens) mas eu adoro tudo no chá e cupcake né, serio, o blog de vocês caiu do céu
    http://mylittleworldmeumundinho.blogspot.com.br/2013/11/resenhaas-vantagens-de-ser-invisivel.html

    ResponderExcluir