Personalizando o Tooltip do blog

Hello bb's, me pediram pela Cbox um tutorial de como personalizar o Tooltip do blog. O que é isso? É quando passamos o mouse por cima de algo e aparece tipo isso:


Mas antes quero avisar que a imagem é do The Lovers, e que aprendi o tutorial lá, então creditem a Lary tá? Let's go ><

Vá no seu HTML do seu blog e procure por </head> . Quando encontrar, acima dele cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

Depois disso, procure por ]]></b:skin> . Acima dele cole:
div#qTip {
padding: 3px;
background: #eee5de; /* Cor de Fundo*/
color: #8b8378; /* Cor da Fonte */
position: absolute;
z-index: 1000;
border: 1px solid #8b8378; /* Cor da Borda */
display: none;
font: bold arial;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Ele vai funcionar direto na sua elite de afiliados se você tiver, mas caso não tiver e quiser colocar em algum lugar, faça o seguinte:

Pra links:
<a href='Link aqui' title='Título do link quando passa o mouse (em tooltip)'>Nome do link</a>

Pra imagens:
<img src='Link da imagem' title='Título do link quando passa o mouse (em tooltip)'/>

Pronto, visualize e se estiver tudo normal salve (:
Beijos~

5 comentários:

  1. Ai, que cute *u*
    Guria, todos os tutos são do TL? O.o
    nsajdsjdiodnsaoidn
    Bjss, s2rita.blogspot.coma

    ResponderExcluir
  2. Curti esse treco de "nome/url" no coment HEUHEUAEHUAHUAUHEUHAEHUAHEUHEAUHEUHE ~ nop.
    Ah, usei o tuto (: beijos

    ResponderExcluir
  3. Não entendi, onde eu vou colocar o código para links é o código para imagens ?

    ResponderExcluir