17 de jul de 2011

Tooltip - Mensagem colorida ao passar o mouse

Vasculhando códigos HTML no Google acabei achando o Pink Skull Design! Que apesar de ser novo é um mimo, e é super fofo! E como a dona do site: Isabella é muito querida topou postar as vezes que der aqui no blog!

Sabe quando você arrasta algum o mouse em algum link e aparece uma mensagem colorida, igual no gagdet de afiliados (no PLACE FAME)? A Isa vai ensinar vocês como adicionar este código em seu blog. Toda vez que você usar o atributo 'title' esse efeito estárá visível.
Instale o Javascript:
Vá até Design > Editar HTML e proucure por: </head>, cole 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'/>

Aplique o estilo CSS:
Continue em Editar HTML, e proucure por ]]</b:skin>, e cole o código abaixo ACIMA da tag:
div#qTip {
padding: 3px;
border: 1px solid #666;
---/* cor, expressura, e estilo da borda */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;
---/* cor do fundo */
color: #FFF;
---/* cor do texto */
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
Prontinho, agora é só você modificar as cores usando sua criatividade! Depois de modificar, salve. E para conseguir este efeito é necessário usar o código abaixo:
<a href='LINK_AQUI' title='DESCRIÇÃO_DO_TITULO'>NOME_DO_LINK</a>
<img src='LINK_DA_IMAGEM' title='TÍTULO_DA_IMAGEM'/>

 Lembre-se também que, a funcionalidade deste script pode variar de acordo com o template. 
Créditos merecidos á minha amiga Isa do Pink Skull, e a Clau do Mundo Blogger.

8 comentários:

  1. Aonwt linda, amei aqui. Me ensina como colocar essa borda em cima? ficarei SUPER feliz *-*
    beijos
    www.blogueirasteen.blogspot.com

    ResponderExcluir
  2. Coloquei no meu blog *-*
    Gostei, mas como faz pra ficar tipo 'transparente' igual aqui? *-*
    1bj♥

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  3. onde que coloca esses últimos 2 códigos ai???é em JavaScript?

    ResponderExcluir
  4. Consegui!!!!!!!!!!Beijo.......

    http://s2fran.blogspot.com/

    ResponderExcluir
  5. Coloquei no blog, só que eu queria saber como faz para ser na area dos afiliados, igual aqui no blog.
    Responde por aqui mesmo, porque o blog tá fechado pra reforma.
    Bjs

    ResponderExcluir
  6. Flor, peguei o código para os links em fade, deixei os créditos e não copiei a página inteira, é que eu queria fazer um tutorial de como editar os links. E vou fazer uma postagem de como personalizar o tooltip, deixarei os créditos e não copiarei a página inteira. Li a F.A.Q e está dizendo que tenho que avisar, então... avisei!
    inspiracaodeumagarota.blogspot.com

    ResponderExcluir
  7. Olá. Gostaria de saber porque o efeito não funciona nas páginas criadas por mim, só na página principal do blog. :/ Obrigada!

    ResponderExcluir
  8. Corrigindo meu comentário anterior, ele funciona sim nas páginas criadas. O problema é que eu não uso o menu de páginas do blogger, e sim um menu horizontal dropdown, e acho que por isso que não funciona. Poderia tentar resolver isso pra mim? Queria muito usar o efeito tooltip nas minhas páginas sem precisar remover o menu dropdown. :(

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.