Tooltip + Novo Layout!

Olá meus docinhos >.< (até eu nessa mania?) Gostaram do layout novo? Ele se chama "Falso Tumblr", e eu acho que ele ficou 50 bilhões de vezes melhor do que o outro -exagero- quer dizer, eu curti, e vocês? Ah, o tutorial! 
Então, o tutorial de hoje é Tooltip. Mas, o que é Tooltip? Tooltip é um tipo de mensagem colorida que aparece ao passar o mouse, como por exemplo aqui. Chega de enrolação e vamos ao código!


Bom, primeiro instale o Javascript colando o código abaixo acima da tag </head> no HTML do seu blog.
<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'/>
Agora vamos aplicar o CSS. Vá em seu blog, Design, Designer do Modelo, Avançado e finalmente "Adicionar CSS". Na caixinha que aparecer, cole o CSS abaixo:

div#qTip {
padding: 3px;
border: 2px solid #666;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;
color: #FFF;
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
Faça como na imagem abaixo:
Bom, agora salve! Pronto, já tem tooltip no seu blog ! Para usar, basta colocar:
Nas imagens use:
<a title="Mensagem ao passar o mouse" href="link"><img src="url da imagem"/></a>
Nos links use:
<a href='link' title='Mensagem quando passa o mouse'>Nome do link</a> 

Bom, espero que tenham gostado do tutorial.. Beijos :* (P.S.: O modelo testado foi o modelo Viagem, não sei se funciona em outros modelos)

3 comentários:

  1. Que link é esse no codigo usado para imagens e onde coloca o codigo? Me ajude por favor!

    Bjinhus. doceamor-corderosa.blogspot.com

    Bruna.

    ResponderExcluir
  2. @Bruna Escarabelli Flor, o link é o endereço que a imagem direciona. Você coloca o código nas postagens flor. Beijos

    ResponderExcluir
  3. Ah, brigadinha querida!
    Vlw pela ajuda!
    Beijinhos!

    doceamor-corderosa.blogspot.com

    Bruna.

    ResponderExcluir