Personalizar o Tooltip

Xuxuzinhos como prometi trouxe p/ vocês um tuto de como personalizar o Tooltip (what?) é aquele balãozinho que aparece quando passamos o mouse no link  Passe o mouse viram 
Não é difícil e cada um pode personalizar de acordo com seu gosto e com o estilo do blog :)

Vá em design ~ Editar html ~ Ctrl F procure por /body

E cole acima:

código a ser personalizado:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>

<style>
div#qTip{

margin:17px 0;
padding:3px 5px 3px 22px; /*modifique se precisar ajustar o mini gif*/
display:none;
background:#fff  /*Cor de fundo do Tooltip*/ url(url do mini gif)no-repeat 5%;
text-align:left;
font-family:  'arial'; /*modifique a fonte se quiser*/
font-size:12px; /*tamanho da fonte*/
z-index:1000;
position:absolute;
color:#000; /*Cor da letra que quiser*/
border:#ccc solid 1px; /*Cor e estilo da borda que quiser*/
border-radius:10px /*Se quiser arredondar o balãozinho*/
}
</style>

Não mexa no que esta destacado em azul, apenas o que esta em rosa ok

Para aparecer nos seus links use:


<a href='URL' title='Descrição do link'>Nome do link</a>

42 comentários:

  1. Gata valeu a dica, mas tô com trauma em mexer em html, kkk. não vou nem arriscar.
    ♥Bjinhos♥
    http://ilmacavalcante.blogspot.com.br

    ResponderExcluir
    Respostas
    1. kkkkkk para com isso guria :B

      Excluir
    2. eu tambem tava assim mas depois conseguir fazer as coisas nos meus blogs de testes kkk eu visualiso antes para ver se nao ficou na navbar

      Excluir
  2. ótimo tutorial haha

    http://bb-garotax.blogspot.com.br/

    ResponderExcluir
  3. TOOLTIP perfeeito
    OMG, nunca vi um assim.
    caprichou eeinf lor *-*

    the--baby.blogspot.com

    SEGUINDO AQUI... acc afiliação? *-*

    ResponderExcluir
    Respostas
    1. rsrs bigadim *-*
      aiin xuxu desculpa, mas por enquanto as vagas estão fechadas

      Excluir
  4. Arigatô pelo tutorial!!!!!
    Vc tinha fechado o blog para fazer o layout?
    Eu tava doida para fazer uma visita rsrsrs!!!
    O novo layout,como todos,uma GRAÇA!!!!!!!!!!!!!!!!!!!
    Vc sabe fazer layouts lindos *¬*!
    Estava procurando muito o tutorial mas nom achava~
    kissus~

    ResponderExcluir
    Respostas
    1. ^-^ aiin brigaduu
      eu não ia fechar o blog só que deu piripaque no html e tive que fechar p/ ajeitar o safado rsrs

      Excluir
  5. Amei seu blogger, e super fofo
    www.commentsgirls.tk

    ResponderExcluir
  6. eu faço o tutorial,mas o mini gif nom aparece...
    o que faço?

    ResponderExcluir
    Respostas
    1. Humm pode ser o url do gif..eu testei agora aqui no blog e aparece..tenta outro mini gif xuxu..testei o tuto com os gifs desse post óh http://bad-reputation-13.blogspot.com.br/2012/04/gifsmini-gifs.html ^-^

      Excluir
  7. Que lindo! *-* Amei fofa. Seu blog é um doce.

    http://anikspink.blogspot.com.br/

    ResponderExcluir
  8. own tudo que presisava! tava doida procurandooo *0*
    eu vou usar em templates e outro blogs *0*
    http://magaligirls123.blogspot.com.br/

    ResponderExcluir
  9. ah,e como vc fez pra algums fundos de gadgets serem diferentes dos outros?
    tipo::: os seus seguidores tem um fundo diferente o welcome tem borda que os outros naum tem,como faz isso?

    ResponderExcluir
  10. Uau, seu blog esta mais lindo e cuti *-*

    ResponderExcluir
  11. Muito fofo mesmo *--------*
    So nao coloco no meu blog por que to no tablet T.T

    bakahimesama-oficial.blogspot.com

    ResponderExcluir
  12. *-* adorei demais o tuto,nunca tinha ouvido falar nesse Tooltip,mas adorei,sério mesmo,hehe.

    Beijos

    www.em-teusbracos.blogspot.com

    ResponderExcluir
  13. Vou usar , beijo e amei o novo lay ^^ '
    http://blog-foreverpretty.blogspot.com.br/

    ResponderExcluir
  14. OI Linda,amei demais seu blog,e já estou seguindo,o conteúdo,o design é tudo maravilhoso,AMEI O TUTO,ACEITA AFILIAÇÃO?.

    Beijos
    www.queridaprincessa.blogspot.com
    WELCOME TO DEAR PRINCESS

    ResponderExcluir
    Respostas
    1. brigadim, mas desculpe flor no momento não tem vagas ;)

      Excluir
  15. Adorei o blog e os tutoriais! Tudo é muito lindo! Já estou seguindo seu blog!


    Bjos,
    Mah
    spazio-teen.blogspot.com.br

    ResponderExcluir
  16. Belo tutorial flor.

    http://blogclubeteen.blogspot.com.br/

    ResponderExcluir
  17. Eu estava precisando de um toltip kawaii assim com mini gifs pra por no proximo láy ^^ Vlw :D
    http://garotadoolharsincero.blogspot.com

    ResponderExcluir
  18. Adoreeei. Que legal!!

    Beijo,
    www.estanteseletiva.com

    ResponderExcluir
  19. Kaka estouu precisando de uma ajudiinha sua tem como você me ajudar amore ?
    Eu quero personalizar a sidebar la do blog com um modelo mais ou menos tipo o seu mais eu não consigo deixar o título do gadget assim como está aqui, poderia me ajudar ?

    Beijos
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  20. Adorei seu dica.
    http://sobre-tudoum-pouco.blogspot.com.br/

    ResponderExcluir
  21. Omg! consegui colocar no meu blog! eu não tava conseguindo colocar tooltip no meu blog.. rsrsrs
    Bjos

    ResponderExcluir
  22. Mais uma dica que com certeza vou usar... estou com um pouco (muita) preguiça... mas assim que esse encosto for embora eu vou mexer no Layout do blog!
    Abç

    http://adraftbox.blogspot.com.br

    ResponderExcluir
  23. Caraca! Vlw ein, hehe, muito massa isso, acabei de usar no meu blog ~> Adolescente Nerd

    ResponderExcluir
  24. Postei esse código mais creditei, olhe clicando aqui

    ResponderExcluir
  25. Seus tutoriais são muito bons, bem fáceis de entender *-*

    Acompanho seu blog, e adoro muito ele ><

    http://eduardaweber.blogspot.com/

    ResponderExcluir
  26. Olá,
    Já seguindo aqui amei
    Estava procurando esse codigo aqui e achei seu blog
    Tentei fazer,mas dá erro quando eu insiro o link
    Como inserir?

    Beijos

    www.livrosegostos.blogspot.com

    ResponderExcluir
  27. Ótimo tutorial, amei perfeito demais aqui :3

    http://lovelysprings.blogspot.com.br/

    ResponderExcluir
  28. Eu não achei o código "/bodyy" só o e quando vou colocar Nome do link não funciona!

    ResponderExcluir
  29. Finalmente encontrei um que eu consiga colocar no blog!

    Segue ai fofa ---♥ diariodacarol<3blogspot<3com<3br/ ♥--- Troca os <3 pelos pontos finais!

    ResponderExcluir
  30. Finalmente achei um para o meu blog (sem querer escrevi de novo a mesma coisa só com outro perfil)

    Segue ai ---♥ diariodacarol1<3blogspot<3com<3br/ ♥ Tro que os <3 pelos pontos finais

    ResponderExcluir
  31. *OOOOOOOO* .. amei .. Repassei no meu blog.. ( Claroo com seus devidos créditos ) kkk´s , amei fofa .. parabéns ! http://www.mundodavick2000.blogspot.com .. seguindoo retribuui ? obrigadaa !!

    ResponderExcluir
  32. Adorei a dica, muitooo obrigada!
    Ah e seu blog é liiindo!

    amantesdemoda.blogspot.com.br

    ResponderExcluir