sexta-feira, 30 de dezembro de 2011

Tutorial: Hack ''leia mais'' muda imagem ao passar o mouse

Quem não curte personalizar o blog? E deixa lo mais único? Aaaaah fala sério todo mundo né gente *-* então hoje eu vou ensinar a vocês a personalizar o hack ''Leia Mais''. Tipo igual ao do JD quando passa o mouse muda a imagem. Veja um exemplo, passe o mouse na imagem abaixo:
Eu nunca vi esse tutu pela web, então se repassar credite (: Outra coisa é super fácil garanto! Mais precisa prestar atenção, ok!

Vá no seu HTML e marque a opção ''expandir modelos de widgets'' dê um ctrl + f e procure por: <data:post.jumpText/> apague e no lugar cole o seguinte código:
<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, exemplo:


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, exemplo:
Vocês mesmos podem criar suas imagens e hospede as em um site que faça isso gratuitamente ex: imgur.com 
Jackie como eu pego a URL de uma imagem? 
clique em cima da imagem com o botão direito do mouse e selecione '' copiar url da imagem ''. Só isso.

 Bom pra quem está com preguiça de fazer isso tudo eu já deixei alguns códigos prontos é só clicar em leia mais para ver>> Estou deixando vocês mal acostumados hein, kkkkkk'

Cole o código abaixo no ''lugar'' de: <data:post.jumpText/>


<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/eo1m2.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/eTYhs.png&apos;; return true' src='http://i.imgur.com/eo1m2.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'/>





<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/v9zVo.png&apos;' onmouseover='this.src=&apos;http://i.imgur.com/PScl7.png&apos;; return true' src='http://i.imgur.com/v9zVo.png'/>


É isso espero que tenham gostado!

91 comentários :

  1. ououou ótimo tuto Jackie! eu nem sabia que isso existia! kkkkkkkk juro pra você. Eu não consegui encontrar o código no meu html é uma pena :(
    Mesmo assim valeu o tutorial, é d + :D
    BEIJOS
    www.ponhaglitter.blogspot.com

    ResponderExcluir
  2. Otimo tutu Jackie, será qe vc pode me ajudar?
    sabe eu qeria personalizar mais o meu blog e taals, tipo tirando o nome das coisas e colocando imagens como seguidores... entende né? mas num consigo,acho qe seria bem mais fácil se eu soubesse fazer template,mas num seei#tragico bubu,poise ,teem como se me ajudar? porqe eu vivo lendo seeus tutus uns eu consigo fazer outros ñ,boom eh isso,obrigado pela atençao!!
    bjookas
    http://karlarayna.blogspot.com/

    ResponderExcluir
  3. Jackie adorei o tutorial! Já fiz no meu blog e adorei o resultado! Obrigada, o resultado fica muito fofo *-*

    Bjs e até

    daimaginacaoaescrita.blogspot.com

    ResponderExcluir
  4. Amiga amei seu novo Leia Mais* huashuas
    Ótimo tutu .. não sei dize qual é o leia mais .. mais fofoo amei *----* são lindos de mais!
    - pelo menos valeu apena a gente ficado em casa porque o tutu é ótimo!
    Bjs :D
    :l:

    ResponderExcluir
  5. Ahh q tuto legal em jackie? Não uso muito a imagem de 'Leia Mais',só uso raramente quando o post é bem grande, mas fica bem legal o efeito na imagem, dpois eu coloco hehe' bjinhos
    http://blogdaingridzinha.blogspot.com/

    ResponderExcluir
  6. Jackie!! amei! OMG super útil!!
    beijos

    ResponderExcluir
  7. Jackie esse tutorial é muito útil! Se eu usar irei te dar todos os crêditos!
    Http://isa-pequena.blogspot.com

    ResponderExcluir
  8. oi flor, amei o tuto, porém não consegui encontrar o código no meu HTML assim como a Luana, mas tudo bem.
    Teu blog me surpreende cada vez mais. amo aqui.
    meu blog está em reformas, e estou navegando pelo seu blog para conferir os tutóriais deixados por você aqui. e eles tem me ajudado muito.assim que eu reabrir o meu blog te aviso, para você conferir o resultado. beijos.

    spaceteen-gabriellaoliveira.blogspot.com

    ResponderExcluir
  9. @Moon(: Que pena que não achou guria =/
    Brigada pelo carinho *-* Tenho certeza que seu blog vai ficar lindão \o/ viu? Aaah e eu vou adorar ver o resultado! Me avise sim!

    :d:

    ResponderExcluir
  10. Sei que já comentei nesse post mas FELIZ ANO NOVO para você e seu blog!!
    beijos

    ResponderExcluir
  11. Gataaa, isso foi maravilhooso! Ameii! Logo colocarei lá no Blog!

    Beeijos, linda! =)

    Cáhh Chaves.

    ResponderExcluir
  12. @LuanaK Você marcou a opção 'Expandir modelos de widgets'? Tem que marcar mesmo, se não você não encontra o código. :)
    Pode ter certeza que não tem nada a ver com seu modelo, pois o leia mais é aplicável a qualquer modelo, basta localizar o código que a Jackie colocou no post.

    Espero ter ajudado ;)

    Beijos

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  13. QUE LEGALLLLLLLLLLL *_* ADOREEEEEEEEEEI, vou colocar lá!!!

    ResponderExcluir
  14. SUA LINDA! Eu procurava há muito tempo esse tutorial! Nossa, obrigada, Jackie *-* você é demais! Vou tentar fazer. Tomara que de certo. ^^
    PS.: Você poderia disponibilizar imagens dessas vermelhas?
    http://blogueiragabi.blogspot.com/

    ResponderExcluir
  15. aiiin Jackie ajudou muito .... porque oque eu fiz aconteceu um desastre * ...

    Jackie bem que você poderia disponibilizar ums templates Cutes & kawaii , ja com a coluna do lado personalizada , pois esta muito dificil achar templates assim , além do mais o meu template foi daqui , eu só os personalizei ...
    Sem esquecer Boas festas & muito , muito Sucesso ! ...

    Bjinhus Keells Silva * do
    ( http://girllsweett.blogspot.com/ )

    ResponderExcluir
  16. Nossa eu tbm nunca tinha visto este tuto na web,parabéns Jackie *--* arrasou! Eu adorei...

    Novo post,layout + novidades.Confere?

    http://meianoite-br.blogspot.com/

    ResponderExcluir
  17. Deu certo sim ^^ já está no meu blog-teste. Vou passar em breve pro meu normal. Se quiser pode ir lá ver, fofa :D
    http://embrulhandopapeis.blogspot.com/
    :d: beijos

    ResponderExcluir
  18. Adorei o tuto!! O efeito é muito legal!! Já estou usando esse tuto lá no blog!!
    Feliz Ano Novo!

    Bjs

    http://magicmih.blogspot.com/

    ResponderExcluir
  19. adorei o post Jackie são lindos
    tem post novo la no blog bjão
    kamilla master
    http://lovefashionworld.blogspot.com/

    ResponderExcluir
  20. O tutu que eu estava esperando, hehe. logo que vc colocou em seu blog morri de vontade de aprender a fazer isso *------*

    Beijo Grande, Que vc tenha um ano repleto de alegrias, saúde, amor(...) porque tenho certeza que vc merece tudo isso e muito mais.

    ResponderExcluir
  21. Oii floor!!
    adorei o post..
    passei por aqui pra dizer q estou de volta, é q havia parado de postar, pois estava trabalhando, mas agora estou de volta, e logo mais terá muitas novidades. Não deixe de visitar e comentar, q fico mto feliz...fico esperando sua visita ok! Beijos!!

    http://espacofemininoaqui.blogspot.com

    ResponderExcluir
  22. pode me chamar que arrumo mermo! hahaha
    adorei o leia mais ficando azulzinho *__*

    ResponderExcluir
  23. Adorei o tuto! Passando pra agradecer sua participação no concurso "Vc na playlist" e avisar que as votações começam na terça-feira!

    Feliz Ano Novo!

    @GataCinthia
    cdiasblog.blogspot.com

    ResponderExcluir
  24. Oi jackie! Só passei pra desejar um "Feliz 2012" cheio de paz,saúde,amor e muito sucesso pra vc e seu blog.

    Agora tem novo post,confere?^^

    http://meianoite-br.blogspot.com/

    ResponderExcluir
  25. PERGUNTA URGEENTE!
    Oin amo teu blog!
    mas queria fazer uma pergunta.. como bota o ''leia mais'' nas postagens? porfavor responda
    obrigada!

    ResponderExcluir
  26. Ameii , apesar de um otimo tutorial ainda deixa o blogger mais cute ♥ , Bju da Carol :* e Feliz 2O12

    -----------------------
    www.girlstolive.blogspot.com

    ResponderExcluir
  27. Ah, adorei tbm, mas nao consegui achar o codigo tbm...o q sera neh...mas enfim, mto legal..bj

    http://espacofemininoaqui.blogspot.com

    ResponderExcluir
  28. Jackie como eu amei esse tutorial, assim que eu deixar minha preguiça de lado eu vou executar ele.
    Flor, fiz outro blog como complemento do meu, queria q vc passasse lá e se gostar que seguisse. Beiijos.

    ResponderExcluir
  29. o link dele é esse http://dkgoodies.blogspot.com/

    ResponderExcluir
  30. Oiii flor, voce poderia votar no meu blog (Espaço Feminino) nesse blog: http://meninasapeca-ms.blogspot.com/

    Se precisar de votos eu retribuo ok...
    beijos e obrigada flor!!

    http://espacofemininoaqui.blogspot.com

    ResponderExcluir
  31. :k: Oi Jackie, td bom? Eu queria pedir pra vc fazer um tutorial ensinando a colorir as colunas >

    eu tentei mas eu não achei o código que a garota me mandou no HTML, vc pode me ajudar?

    Beijinhos!

    http://mundo-cute-blog.blogspot.com

    ResponderExcluir
  32. Oi Jackie, quanto tempo faz tempo que você não visita meu blog em. :]
    Feliz Ano Novoo uhuu! \õ/
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  33. Eu Aaaaaaadorei *-* kkkkkkkkk' #terra dos dinossauros. Vou por no meu! (:

    www.caprichando.com

    ResponderExcluir
  34. ebaaah! vem sim jackie!
    Feliz Ano Novoo uhuu! \õ/
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  35. Eu tambem nem passei de branco *-* ahsuahs
    Coloquei esse tuto no meu ' adoorei

    ResponderExcluir
  36. Ain legalll, flor sem querer pedir mtu se por acaso vc souber explicar como colocar a figurinha embaixo do site que leva ao topo, vc explica? Eu descobri seu blog por acaso, e adorei Ele , mtu lindo! Já estou seguindo, se puder me seguir Eu agradeço, é http://ladysfashion-mn.blogspot.com/
    Feliz 2012!!
    beijinhos

    ResponderExcluir
  37. Oi jackie
    Eu quero te falar uma coisa muito importante
    Eu acho que o stiqr ta com problema ou acabou
    Ou é o meu computador que esta doido,mais não esta carregando o meu blog que é com o stiqr não esta carregando o site stiqr e nem o seu perfil
    Voce confira para mim se é erro do stiqr mesmo?
    Ou é o meu pc e a minha net?

    Entra lá no seu perfil e ve se carrega
    Por favor

    Bjjs

    http://fantasiamenina.blogspot.com/

    ResponderExcluir
  38. nyaaa``adorei esse tutu!!! kkk``

    já apliquei no meu blog!!! :DD

    kissus*-------*

    ResponderExcluir
  39. Jackie você deixa minha vida muito mais facil viu!
    Obrigada pelo tutorial! Eu simplesmente AMO esse blog!
    Blog: Cute Bii

    ResponderExcluir
  40. Jackiee!! tava muito curiosa pra saber disso!! ameii, :D FELIZ ANO NOVO ATRAZADO!
    tchauzinho
    kah santos :)
    http://kaylacristina.blogspot.com/

    ResponderExcluir
  41. @Domênica P. :k: aaaah brigada Guriiia!
    eu faço o possível para agradar meus leitores *---*

    ResponderExcluir
  42. Que tutorial mais divo, amei *-*

    http://flash-paradise.blogspot.com/

    ResponderExcluir
  43. Obrigadaaa pelo tutorial!
    Caçei e também não achei! Coloquei no blog e o seu blog está na página de créditos ok? Beijos

    http://teenagesky.blogspot.com/

    ResponderExcluir
  44. amr,estou colocando o código que você indicou mais está dando erro 500 lá diz que o XML não está fechado adequadamente ,já tentei de todas as formas pois não consigo será que poderia me ajudar pf.há amei o tutorial perfeitpoh

    ResponderExcluir
  45. Adorei *--* Vou fazer com certeza

    www.tudyteen.blogspot.com

    ResponderExcluir
  46. Jackie oO vc di novo facilitando nossas vidas...
    mas jakie eo gostaria de saber como q faz para Exibir Sumários dos Posts com Link de “Leia Mais” achei um tutu sobre mais num deu certo vc podi me ajudar...
    bjus

    ResponderExcluir
  47. Funfou aqui,hehehe
    muito esperta você heim,

    Casa comigo? =^.^=

    ResponderExcluir
  48. Jaackie, funcionou \o/ mas tipo, a imagem fica centralizada, eu queria que ela ficasse alinhada a direita... como q faz? bjos

    cherry-miint.blogspot.com

    ResponderExcluir
  49. Aiin Jackie , vc sempre me surpreendendo com um tuto perfeito nér? Eu amei , Mais infelismente , eu não achei o código no meu html :( Mais obrigada pelo post , é liiiindo os 'Leia mais' que vc fez! Beijão ;*


    http://degarotapragarotaoficial.blogspot.com

    ResponderExcluir
  50. Adorei o tutorial, estou usando <3

    Bjs,
    http://sapatosdeveludo.blogspot.com

    ResponderExcluir
  51. Jackie..Você é uma verdadeira anjaa! :j:
    Tive alguns probleminhas no html,mas já ageitei e fico liiiiindo,tava procurando na net e n achava :*( ai vim aqui e acheiiiii,te AMOOOs2oooo
    http://avrilnoticias.blogspot.com/

    ResponderExcluir
  52. :i: tentei, mas nao consegui...acho que deve ser por que o blog tenha o liknid

    ResponderExcluir
  53. Esse post é muito útil!!Obg :k:

    ResponderExcluir
  54. Eu amei! ja ate coloquei no meu! :j:

    ResponderExcluir
  55. Oi,como colocar este efeito na fotinho dos coments?
    Please espero respostas,bjs.
    biacmenezes.blogspot.com.br

    ResponderExcluir
  56. Consegui, fazer o código, mais jack ;
    Como faz para o leia mais funcionar ?

    www.nosnopc.blogspot.com

    ResponderExcluir
  57. Ooi! Achei muuuito fofas as imagens, mas eu não concegui achar o codigo no html :i:

    Bjinhus, :l:

    ResponderExcluir
  58. ótiiiimo Tutorial, adorei e o melhor aprendi!
    estou usando uma imagem, e creditei rss

    segue lá?
    http://diario-de-tendencias.blogspot.com.br/
    comecei agora e preciso de ajuda rs
    seguindo s2

    ResponderExcluir
  59. eu não consegui colocar não apareceu nada alguém sabe por quê ??

    ResponderExcluir
  60. :m: peninha , não encontrei o código no meu blog

    ResponderExcluir
  61. Eu tentei no de uma amiga e deu certo! Você é um máximo :h:

    ResponderExcluir
  62. Que raiva! Não acha esse trecho que você mandou procurar! Esse: !
    :k:

    ResponderExcluir
  63. Ameei Flor ^u^ Demais! O Efeito Fica Super Legal! E Lindo! Eu Queria Um leia mais Legal,E Encontrei um Perfeito!! Obrigada Jack!! Se Quiser Ver como Ficou:

    http://gotasdecherry.blogspot.com.br/

    E Também uso Alguns Outros Tutoriais ^u^

    ResponderExcluir
  64. Jackie, amei esse tuto já tô usando lá no blog shuahusua Você sabe me dizer como se coloca o "Leia Mais" com esse tuto no canto direito do post? Já procurei isso em tudo quanto é blog mas não encontrei. Me ajuda? Beijoos e uma ótima semana :*

    tudyteen*blogspot*com

    Troque os * por ponto ;)

    ResponderExcluir
  65. faz um tutorial como deixa no comentarios assim tipo emotion igual essa :c: posso reblogar colocarei créditos

    ResponderExcluir
  66. Jackie Dream, arrumando nossos blogs desde...(não sei pardom)
    Mais que revoluciona revoluciona, o meu blog tá tão tudo por causa dessa maravilha da internet!!
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  67. Nao consegui , o leia mais ficou laa no canto do post

    ResponderExcluir
  68. Outra duvida Jackie eu de novo rsrs então jackie como faço para colocar esses efeitos na imagem que eu quiser como essa >>> http://i.imgur.com/FCbj1.jpg
    porque quero muito colocar no meu blog você poderia me ajudar ??

    ResponderExcluir
  69. PERFEITO D + OOK SO PEGUEI AS IMAGENS OOK http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  70. Salvou minha Vida!! Brigadão de coração!! ♥

    ResponderExcluir
  71. Amei Jackie, usei no meu layout novo hehe
    Beijinhos
    Moda Ponto

    ResponderExcluir
  72. Eu amei o tuto, só que no meu o link só fica do lado esquerdo, vc sabe como faz para ficar do lado direito? Beijos flor <3
    http://bellatulee.blogspot.com.br/

    ResponderExcluir
  73. muito perfeito, adorei, usei um modelo pronto aqui do seu blog kkkkkk ^-^ perfeito mesmo

    ResponderExcluir
  74. Oi Jackie, adorei o tutorial. Já estou usando, todas as imagens ficaram lindas! Beijos ;*

    http://portrasdascortiinas.blogspot.com.br/

    ResponderExcluir
  75. oi eu não consigo...
    http://garotasoriginas.blogspot.com.br/

    ResponderExcluir

.