segunda-feira, 6 de janeiro de 2014

Como colocar tooltip (mensagem ao passar o mouse) no blog


Olá littles do meu <3 haha
Estou tão animada hoje, pois é meu primeiro tutorial *-*
Chega de enrolação e vamos lá!

1º: Vá em modelo > editar HTML > dê Ctrl + F e procure por <head>
Depois você vai colar este código embaixo disso:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>

Depois disso dê Ctrl+F de novo e procure por ]]></b:skin> e cole o código abaixo, acima dele:
div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}


E pronto! É só mudar as cores e tals de seu jeito ;)
Códigos fornecidos por Cherry Bomb
Agora para o tooltip aparecer, coloque isso quando for colocar link:
<a href="link" title="Descrição do link">Texto linkado</a>
Nesse descrição do link, você vai botar o texto que quer que apareça quando for passar o mouse num link ;)
Você também pode fazer com imagens, basta colocar este código:
<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>

Nenhum comentário:

Postar um comentário