♦ Tutorial ~ Personalizando o Tooltip


Olá Rilakkumas!!
 Novamente trouxe um tutorial, quem pediu foi a Lovelly do ♦ Lovelly no Sekai ♦ e o pedido foi um tutorial de como personalizar a Tooltip.
 Tooltip é aquele balãozinho que aparece quando passamos o cursor sobre links, igual quando você passa o cursor em cima das minhas elite de afiliados.
 Viu??? É bonito néh??? Então vamos aprender.
 Mas antes de qualquer coisa, esse tutorial é original do Bad Reputation, então créditos para lá.
 Continue lendo >>>


 Vá em:
MODELO  EDITAR HTML e aperte Ctrl + F e procure por /body

E cole em cima dele esse código.



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


 Pronto, personalize ao seu jeito, o código já explica o que tem que fazer.
 Sobre a mini-gif, você vai encontrar vários AQUI e AQUI
 E aqui tem uma tabela de cores MX Studio
 Onde está tem o
border:#ccc solid 1px; /*Cor e estilo da borda que quiser*/
 #ccc é a cor da borda
 Solid é o tipo da borda, troque o nome por um desses do exemplo
  E px é grossura da borda

 Lembrando, para pegar a URL da imagem selecione ela, aperte o botão direito do mouse e selecione "Copiar URL da imagem".

Novamente os créditos ao Bad Reputation

12 comentários:

  1. Nyah *-* Brigada ^^
    Me ajudou muitoooo
    E ficou muito lindo, usarei no meu novo Lay

    http://lovelly-no-sekai.blogspot.com

    ResponderExcluir
    Respostas
    1. As ordens.
      Pedido enviado, pedido postado kkkkkkkk
      É lindo mesmo

      Excluir
  2. Eu adorei,vou ver se uso no meu novo Lay *u* seu blog é lindo,tá de parabéns ^^
    Beijos ~
    http://bolodemorango.blogspot.com.br/

    ResponderExcluir
  3. Primeira coisa que eu consigo modificar com sucesso no meu blog
    HUAHSAUHSAUSHAUSHAUSHAUSHAUSHAUSHAU
    sério, ajudou mto!
    Eu ainda to arrumando as coisas e nem fiz post pra falar que eu peguei daqui, por isso a falta de c´redito de umas imagens de afiliados etc, mas paciencia, eu sou lenta pra essas coisas LOL
    Mas de qualquer forma, muito obrigada, isso é mto útil!
    Detalhe: Tente acrescentar esse link http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm nesse seu post, pro povo saber onde tem as cores que dá pra modificar (ja que tem gente que não sabe né? Tipo eu kkkk) XD

    ResponderExcluir
    Respostas
    1. Obrigado pela dica.
      Ufa que alguem conseguiu me entender, quanto você terminar eu quero ver certo???

      Excluir
    2. Nossa, eu que deveria agradecer pelo tutorial!!
      foi bem fácil achar as coisas, e agora mto mais XD eu fiz normal, só troquei as cores e coloquei o gif que eu queria, não mudei nada XD
      >http://miyaneoblog.blogspot.com.br/ (na parte de afiliados dá pra ver como ficou Nyah~~)
      Kissus Kissus ^^

      Excluir
  4. Ah, eu estava procurando isso, vi algumas vezes mas só me toquei agora ><
    Mas uma coisa eu não entendi: Como assim o estilo da borda ? 9.6

    ResponderExcluir
    Respostas
    1. Já vou arrumar para você entender.
      Obrigado por avisar

      Excluir
  5. nossa..Eu simplesmente AMO este blog! *O* Todas as coisas dos tutoriais que eu fiz deu certo!! *--* REPRODUZ SENHOR,PARA QUE A GENTE TENHA MAIS BLOGS COMO ESTE!

    ResponderExcluir
  6. Muito bom esse tuto!! VOu reblogar e dar os créditos a você e ao Bad Reputation pode???
    bjs

    ResponderExcluir