♦ Tutorial ~ Leia Mais estilo roll


Hey Nekos
  Não sei o sei o que escrever aqui antes de mostrar o tuto... bem, deixa eu ver o que preciso dizer... Segunda-Feira é meu aniversário e eu sempre desconfio que farão festa surpresa para mim, mas nunca fazem, e eu estou querendo fazer um sorteio e um concurso antes do fim do ano.
  O tutorial de hoje é daquele estilo de Leia Mais que eu usava, quando passava o mouse por cima a imagem descia deixando um rastro, bem não é assim, eu não sei como explicar, é melhor vocês verem com seus próprios olhos. 

Vá em MODELO >> EDITAR HTML e procure por.
<data:post.jumpText/>
Quanto achar ele apague e troque por esse código.
<p align='right'><a expr:href='data:post.url'><img class='leiam' src='http://1.bp.blogspot.com/-c6CDfX4Z_d8/UbzpgTRZ9JI/AAAAAAAAWVs/R4NCV4xM1PY/s1600/leia.png'/></a></p>
Agora procure por ]]></b:skin> e acima dele cole esse código.
.leiam{
background:url('LINK_DA_IMAGEM') top;
-webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; }
.leiam:hover{
background:url('LINK_DA_IMAGEM') bottom;
-webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; }
No background você precisa colocar o link da imagem, Agora é só criar a imagem que você quiser e editar. Eu vou deixar um modelo pronto e outras bases para vocês usarem. Quando terminar a semana de tutoriais eu posto mais modelos.


5 comentários:

  1. Olá! Eu ás vezes fico sem ideias também para o primeiro parágrafo, mas como todos sempre dou um jeitinho. E, tipo, você só está postando tutoriais que eu acho bonito! Pois este daqui também é outro daquele layout antigo, e é muito lindo!

    Loucuras do Thonn

    PS: Tipo, seu aniversário! Vou tentar me lembrar para vim aqui te parabenizar! E eu sempre fico feliz quando as pessoas fazem sorteios, mesmo as vezes eu não participando, acho que é até meio besta isso em mim, mas não consigo entender, sei lá.

    ResponderExcluir
  2. Parabéns adiantado Byel *_*. Adoro os tutos de vocês, são muito criativos e originais. Amei de paixão esse tuto :3 Já disse que o lay está perfeito?

    htmlandresources.blogspot.com

    ResponderExcluir
  3. Tava louca pra aprender a fazer isso, fica muito bonito o efeito ^^

    ResponderExcluir
  4. ahhhhhhhhhhhh, QUE LINDU, ADOREI O EFEITO :p vc bem que podia ter deixado o rosa pronto né? eu tenho séios problemas na hora de editar imagens mas that's fine :P

    ResponderExcluir
  5. muito legal, obrigada
    seus tutos são muito bons

    ResponderExcluir