26 de dez de 2012

Leia mais em Hover (Com Imagens)

Olá anjos! 

Estava olhando meus posts em rascunho e notei que tenho muitos aqui que estão atrasados, já deveriam ter sido postados há tempos, mas por algum motivo que não sei eles ficaram parados aqui. Inclusive alguns pedidos que recebi no meu primeiro Tumblr. Enfim, vou postar esses tutoriais até o dia 31. Isso quer dizer que teremos vários posts por dia.

Hoje vou trazer o tutorial do Leia Mais em hover. Diferente dos "leia mais" que a gente conhece, esse é em hover com imagens. O tutorial é do blog Jackie Dream, e estou repassando. 



Vá no HTML do seu blog, marque a opção ''expandir modelos de widgets''. Depois disso aperte CTRL+F e procure por:

<data:post.jumpText/>
Apague todo esse código, e no lugar coloque:

<img border='0' onmouseout='this.src=&apos;url da imagem principal&apos;' onmouseover='this.src=&apos;url da imagem com o mouse em cima&apos;; return true' src='url da imagem principal'/>



Entenda o código:

Nos trechos url da imagem principal apague e cole a url da imagem que irá aparecer sem o mouse estar em cima.
No trecho url da imagem com o mouse em cima apague e cole a url da imagem que irá aparecer com o mouse em cima. O nome já diz tudo né?

A Jackie fez algumas imagens que eu achei muito fofas! Veja só:


<img border='0' onmouseout='this.src=&apos;http://i.imgur.com/uErwS.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/8G7q6.png&apos;; return true' src='http://i.imgur.com/uErwS.png'/>

<img border='0' onmouseout='this.src=&apos;http://i.imgur.com/oQTJO.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/DEsev.gif&apos;; return true' src='http://i.imgur.com/oQTJO.png'/>



 <img border='0' onmouseout='this.src=&apos;http://i.imgur.com/eWFP8.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/FHNfD.png&apos;; return true' src='http://i.imgur.com/eWFP8.png'/>

11 comentários:

  1. O meu Leia Mais já tá personalizado então nem vou mexer nele D: Mas é um ótimo turo

    Neoreul Saranghae

    ResponderExcluir
  2. Gostei! Obrigada.

    beijodecereja.tk

    beijo-de-cereja.blogspot.com

    ResponderExcluir
  3. Obrigada pelo tuto! Amei
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  4. Eu fiz, mas não está dando certo alternar as imagens, quando se passa o mouse. Também não estou conseguindo retirar uma descrição que aparece quando o mouse fica em cima da imagem, pois fica aparecendo a palavra teste.

    ResponderExcluir
    Respostas
    1. Oi Alice!
      Qual o link do seu blog? Talvez se eu ver possa te ajudar a resolver o problema.

      Você tentou usar algum modelo como exemplo? Pode dar certo ^^

      Excluir
    2. Marina!! Que fofa você!!!
      Então, eu estou na verdade criando um novo layout pro meu blog Tromba. Daí esse link é do blog teste. Como você pode averiguar, quando se passa o mouse em cima da imagem "leia mais" aparece a palavra "teste". Também não consegui alternar as imagens. Fiquei um pouco triste, porque de todos os "Leia Mais" esse do seu blog foi o mais bonito que encontrei.

      Excluir
    3. Olha, o teste que aparece eu já entendi. Quando você passa o mouse em cima do leia mais, o nome da postagem aparece, e como o nome do post é teste, aí aparece isso.

      Acho que sei porque a imagem não está mudando, você fez o upload delas de novo não fez? Repare que no código do seu blog, tem um ponto e vírgula (;) depois do link delas, acho que é por isso que não está dando certo. Tenta tirar os pontos e vírgulas depois do link e ver se dá certo.

      Depois me fala se deu ou não ^^

      Excluir
    4. Ahhhhh, sua linda!! Deu certinho. Depois vai lá pra você ver! Achei que ficou lindo! Queria muitíssimo agradecer por sua gentileza, educação e presteza. Sempre que eu mudo de layout, eu falo do novo modelo e cito o blog que eu retirei o html. Pode estar certa que citarei o seu e a ajuda que me deu. Estou participando do seu blog também, para acompanhar os novos tutoriais. Obrigada mesmo!!! Deus abençoe você! :)

      Excluir
    5. Ficou lindo mesmo! Vou acompanhar seu blog e assim que tiver tempo comento nas postagens, está meio tarde agora haha'

      Sempre que precisar eu estou aqui ;)

      Excluir
  5. Obrigada amore, estava tentando fazer isso a um tempão mas nunca conseguia, sua explicação foi simples e eficiente muito obrigada viu, um grande beijo e até mais.

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!