quarta-feira, 8 de fevereiro de 2012

Efeito hover nos links "Postagens mais recentes" "início" "Postagens mais antigas"

 Dsc07589_large
Hooy pessoas meu tempo está super corrido então não prometo posts diários ok  e quem me mandou mensagens no meu e-mail (entrevistas, dúvidas e outros) só irei responder no sábado. A escola tá uma loucura (quem mandou reprovar o ano né Jackie) 
Ah e sobre o tutorial de hoje não passa de um truque de imagens assim como o ''efeito hover no hack leia mais'' 

Atenção: Antes de qualquer modificação salve seu template ou faça em um blog de testes, ok! 
Outra coisa muito importante. Quem já modificou essa parte do template assim como eu obviamente não irá encontrar nenhum dos códigos abaixo. Então na hora de procurar procure pela url da imagem que você está usando e apague o trecho que a acompanha exemplo: <img src="URL DA SUA IMAGEM" />  e no lugar cole o código sugerido no decorrer do tutorial! 


Alterando ''postagens recentes''
vá no seu HTML marque a opção ''expandir modelos de widgets'' dê um CTRL + F e procure por:   <data:newerPageTitle/>   
apague somente esse trecho destacado e no lugar cole:
<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'/>


Alterando ''início''
agora procure por:   <data:homeMsg/>
apague e no lugar cole:
<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'/>


Alterando ''postagens antigas''
agora procure por:  <data:olderPageTitle/> 
apague e no lugar cole:
<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'/>

O próprio código já diz o que deve ser feito, mas é sempre bom deixam bem explicado:
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:
Coloque a url das imagens em seus devidos lugares, visualize se estiver tudo certo salve (:
Imagens exemplo:
Imagens normal    imagem em hover
   
    
P.S amanhã eu respondo os comentários *--*

64 comentários :

  1. Nossa, era tudo o que eu procurava *-*

    ResponderExcluir
  2. Ótimo post Jackie, como sempre!

    bjãoo

    ResponderExcluir
  3. ei amiga você e seus Tutuu !
    salvando o blog das Gurias ;D
    Beijoos
    :k:

    ResponderExcluir
  4. Você como sempre ensinando à todos, com todo o seu carinho!


    Beeijos, linda! =)

    Cáhh Chaves.

    ResponderExcluir
  5. Flor, você entendeu mal.
    Eu falei que não precisava mais porque eu não iria mais postar, decidi não postar, não fique irritada e nao entenda mal. Beijos, Ge
    E não precisa responder este comentario
    www.blogdasbff-geenic.blogspot.com

    P.S: Sou uma grande fã do seu blog, não fique chatiada nem irritada amor!

    ResponderExcluir
  6. Gostei do tutorial Jackie, fica um efeito bem diferente *-*
    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  7. :h: Oi, flor, amei o blog, já estou seguindo. Segue de volta? http://modinhagirl.blogspot.com/
    Bjs, Giu

    ResponderExcluir
  8. Oii amei seu blog muito fofo
    seguindo se quiser dar um pulinho no meu ?

    http://mebeliscablog.blogspot.com/

    ResponderExcluir
  9. Amo esse tutorial, mas eu uso o escrito lá msm haha :)

    bjs jackie!

    ResponderExcluir
  10. Adoreii o post ! *-*
    to seguindo como o nome de" Blog garota chik s2"
    retribui ?!
    brigada,.... bejinhos *-*
    gatarosadebotas.blogspot.com

    ResponderExcluir
  11. oooi GURIA kk (ameiisso) fiz uma postagem sobre aqui olha lá

    http://apenas-meu-sonho.blogspot.com/

    ResponderExcluir
  12. Obrigada pelo comentário lá no blog Jackie,
    Amei o tuto, quando eu precisar nele vou vim aqui... o seu blog não que me deixar estudar e nem fazer as tarefas, rsrs'
    Beijinhos, e seu blog continua lindo como sempre.
    http://andressa-garotafashion.blogspot.com/

    ResponderExcluir
  13. Oii jackie,a quanto tempo não ?
    Já qu eeu adoro suas fotos(estilo fake :s )
    Estou te convidando para participar do concurso do meu bloguito !
    http://www.avrilnoticias.blogspot.com/2012/02/concurso-relampago-monte-um-look.html
    Otimo Tuto !

    ResponderExcluir
  14. guria lindaaaaa
    brigada
    eu coloquei suas imagens se viu né
    como afiliados
    e coloquei vc la bezossssssssssssssssssssss

    ResponderExcluir
  15. Oi, te indiquei para uma tag de responder 11 perguntas ao seu respeito, da uma olhadinha lá *-*
    http://edianaparadise.blogspot.com/2012/02/tag-11-perguntas.html

    ResponderExcluir
  16. Jackie sempre se superando. Super procurava esse tutorial, mas nem imaginava que funcionaria, rs. Valeu guria! http://desejos-degarotas.blogspot.com/

    ResponderExcluir
  17. Que máximo este tutu.. Jackie agora quem vai puxar a sua orelha sou eu, kkk... como assim reprovou?.. nanana..

    Beijo Grande, Guriia

    ResponderExcluir
  18. Linda eu estava procurando este TUTO faz um século por isso que eu te amo u.ú
    kkkkkk zooa ñ é só por isso ñ *-*
    Nossa vc me salva sempre ....


    BEIJOS FLOR

    :l:

    ResponderExcluir
  19. to precisando muda o lay, vou vim aqui pega as dicas! e lê os tutu...
    http://kelly-club.blogspot.com/

    ResponderExcluir
  20. Amei o tutorial, muito útil e simples, da um toque amais no blog :j:
    Eu colocaria no meu blog agora, mas a preguiça não deixa kkkk
    Beijinhos no ♥
    blog-bola-de-chiclete.blogspot.com

    ResponderExcluir
  21. vc ja tinha feito um desse tutu e eu fiz no blog.. deu certo.. agora eu quero fazeer este mas naum consigo.. (pq sou uma burra de plantao) mas tudo bem depois quando eu tiver com a cabeça limpa vou tentar fazer :h:

    ResponderExcluir
  22. primeira \o/ rs

    jackie tem selinho p vc la no blog :
    http://caes-osmeusosseusosnossos.blogspot.com/p/selinhos.html

    bjo, boas aulas :)

    ResponderExcluir
  23. AMEI JACKIE :j: ESTOU USANDO TÁ ? :d:

    ResponderExcluir
  24. Otiimo tutorial Jackie :)
    bjaao
    http://sooulteen.blogspot.com

    ResponderExcluir
  25. Oi amor :h:
    voce me seguia no meu antigo blog: moda-looklet
    mas eu criei um novo blog e tenho certeza que voce vai gostar:
    www.storyofgirls-oficial.blogspot.com
    tomara que voce gosste bjus
    to seguindo aqui segue de voltaa??

    ResponderExcluir
  26. Que legal faz tenpo que não
    dou uma passada aqui que saudades
    amei o blog!!!

    beijinhos *--*

    ResponderExcluir
  27. otimo tutorial,quando eu puder eu irei usar ele :h: beijao flor!!da uma passadinha no meu blog!!
    http://foreverthefame.blogspot.com/

    ResponderExcluir
  28. Aceita parceria?
    www.blogdasmeninas-lueduda.blogspot.com.br

    ResponderExcluir
  29. Ameei o tutorial, muito lindo o efeito!
    Beijos ;*
    just-a-girl21.blogspot.com

    ResponderExcluir
  30. Amei o tuto!Tava procurando isto a um tempão e nunca acho!AH!Mudando de assunto,acessa lá meu blog!Tem post urgente ULTRA-MEGA-IMPORTANTE!


    www.teensfabuloss.blogspot.com

    ResponderExcluir
  31. Realmente sõa essas pequenas mudanças que dão um Up no blog.
    Flor quando puder faz aí um concurso de divulgação , adoraria participar e aparecer aqui no seu blog ^^
    bj
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  32. ótimo tutorial Jackie !
    Muito bom .
    garota-fashiion.tk

    ResponderExcluir
  33. Oii Jackie , tem um mini concurso lá no meu blog que gostaria muito que você participasse! tem que acertar qual é a cantora

    Seria uma honra ver você por lá >.<

    http://praia234.blogspot.com/2012/02/quem-e.html

    ResponderExcluir
  34. Ameii esse tutorial, vou usa-lo no próximo layout do meu blog!!! Jackie de uma passadinha no meu blog, estou começando agora!


    http://lapetits.blogspot.com/

    ResponderExcluir
  35. Passando pra lhe desejar uma ótima noite
    Beeijos

    http://up-grils.blogspot.com/2012/02/ela-e-boa-mulher-v.html

    ResponderExcluir
  36. parabéns pelo blog é maravilhoso amei cada post bjs..

    http://www.blogtopodendo.blogspot.com/

    ResponderExcluir
  37. *0000000* super úteeeis ! Dá um CHARME ao blog, ameeeeeeeeeeeeeeei super curti ! paskapskapskapsas
    Tem post novo:
    http://www.siteshoow.com/
    Beijooos !

    ResponderExcluir
  38. Amei *-*
    adorei o tutu
    demais :k:
    adoro adoro adoro!!!

    beizos---> adogo seu blog!!

    ResponderExcluir
  39. vc visitou meu blog mesmo! 'haha estou tão feliz, realizei meu sonho ushaushauhsu
    nossa que honra

    ResponderExcluir
  40. ai linda brigadaaaaaaaaaaa
    ficarei super feliz
    então
    eu pequei no site da capricho aqules bottons
    bezossssssssssssssssssssss

    ResponderExcluir
  41. Awwm amei o tuto super legal, o pior que é mesmo a escola está uma agitação e quase não sobra mais tempo pra nada. Beijos
    http://wwwgertiegirlcom.blogspot.com

    ResponderExcluir
  42. Nossa Ta muito fácil Jackie! (sei la eu também sou péssima em acertar quem é ) rsrsrsr

    bjos > http://praia234.blogspot.com

    ResponderExcluir
  43. Há muito tempo estava procurando esse tuto =D

    Beijos,
    http://menina-delicada.blogspot.com/

    ResponderExcluir
  44. EU A-M-E-I e estou usando! Já sigo, segue tmb?? Kisses

    ResponderExcluir
  45. Todo que eu procurava amém!! Obrigada

    ResponderExcluir
  46. adoreiii eu sempre ameiii seu blog entre no meu
    por favorr e http://meninakawaaii.blogspot.com
    bjs to seguindoo

    ResponderExcluir
  47. Pode me ajudar? :a
    No meu html, não aparece em diante!
    Tem como fazer de outro jeito?
    Beijos.

    ResponderExcluir
  48. Jackie, se nao der certo, como tira??

    ResponderExcluir
  49. So tem essas imagens? (para por la na Hack)

    ResponderExcluir
  50. @Dudinha Uéé ... é só retirar os códigos O.o

    ResponderExcluir
  51. Olá jackie eu não consegui colocar porque quando fui procurar o código "" e os outros simplesmente não achei !Me ajuda ?

    beijos
    ilovemecarol.blogspot.com/:k:

    ResponderExcluir
  52. que diabo do caralho....fiquei duas horas tentando....de tudo quanto era forma mas do mesmo jeito n dava....a va se fude tmb

    ResponderExcluir
  53. @Zeus A culpa não é minha se vc é RETARDADO e não sabe mexer com HTML... Sorry ;D

    ResponderExcluir
  54. Eu adorei esse tutorial e foi bem fácil em outros sites era tão difícil de entender...
    Obrigada por me ajudar! byee

    ResponderExcluir
  55. AMEEEI, Botei o tutorial do meu blog, foi um pouco difícil do meu, pois já estava com um tutorial desse tipo, mas eu gostei mas dessas imagens, hahaha, adorei, adorei u_u
    http://dama--de--ferro.blogspot.com.br/

    ResponderExcluir
  56. Ficou PERFECT no meu blog! Na verdade ainda está no teste, mas, ainda hoje passo para o official!
    Malu
    What's Your Style?
    Clika no perfil os posts e links tão lá

    ResponderExcluir
  57. Que legal Jackie amei esse efeito, vou usar no meu próximo layout!!Aliás tudo do seu blog eu uso né(quasetudo)?!Espero mais modelos!!
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir

.