Tutorial: Personalize o tooltip

     Imagem encontrada em (www)


Hey Cherries! Hoje trago à vocês um ótimo tutorial que eu encontrei no mesmo site que eu encontrei a imagem deste post  (www) ! Ensina como personalizar o Tooltip do seu blog. Aí vem a pergunta: O que é Tooltip? 

Tooltip é aquele balãozinho que aparece quando passamos o mouse no link , como no 
exemplo abaixo!

Vamos ao tutorial ~> Vá em design ~ Editar html ~ Ctrl F procure por /body

E cole logo acima o código abaixo:

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

Créditos a Bad Reputation ♥