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

Preview.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicb17nC8ucwhQCttfX5wabJjMNabfIoXGZCjsMryYcWMSDt1ISJWXTtttI4FkmdjqfzT3ghCc_ExWvz3zrbXK65Zu6VJBOathfVQyM0hx2salWKEhDieWn09zDXfB15ym7Ixpkgq9UXcA/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.