Efeito flutuante para o atributo "title" dos links em blogs do Blogger

Olá querido leitor, seja bem-vindo a mais um artigo. No artigo de hoje eu atenderei ao pedido do leitor Iago, que me perguntou como fazer o efeito flutuante no atributo "title" dos links. Para quem não viu este efeito enquanto eu o utilizei aqui no blog, visite o nosso blog de testes e passe o mouse por cima dos links que há no artigo de demonstração, desta forma uma janela flutuante aparecerá com o que foi escrito no atributo "title" dos links.

Imagem por: Toolmantim

Esta caixa geralmente é amarela ou cinza (depende do navegador utilizado), mas neste artigo você aprenderá a customizá-la como nos links do artigo de demonstração. Este código foi postado originalmente pela Vanessa, dona do blog Mundo Blogger, que permitiu que eu publicasse o código aqui no blog, abaixo há o link para o artigo original.
É importante que você saiba, que se houver qualquer tipo de hack ou elemento em seu blog que funcione através da biblioteca de scripts Prototype, como por exemplo o efeito Lightbox, o efeito flutuante não funcionará, pois o mesmo utiliza a biblioteca JQuery, e essas duas bibliotecas, quando utilizadas em conjunto, entram em conflito.

Instalando os scripts do efeito tooltip no Blogger


1. Primeiramente você deverá adicionar os scripts que geram o efeito flutuante, para isso faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

3. Imediatamente acima deste código, cole este outro código.

<!-- Script do efeito tooltip nos links -->

<script type='text/javascript' src='http://dl.dropbox.com/u/17889015/Scripts/qTip.js'/> <!-- script do efeito flutuante-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <!-- biblioteca jquery -->

<!-- Fim do script do efeito tooltip nos links -->


NOTA: o primeiro script é o responsável por criar o efeito flutuante, e o segundo script é o responsável por adicionar a biblioteca jQuery ao seu blog. Dependendo do template que você usa, pode ser que você já tenha o jQuery instalado, portanto, não é necessário repeti-lo, mas caso você não saiba se já possui a biblioteca instalada, apenas use o código como ele foi fornecido.

4. Agora que o código do efeito já foi instalado, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Customizando o efeito tooltip com estilos CSS


1. Agora você deverá adicionar o código responsável por adicionar estilos (cores, fontes etc.) ao efeito. Pressione novamente Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

2. Imediatamente acima deste código, cole este outro código.

/* ----- CSS do efeito tooltip nos links ----- */

div#qTip {
    font: normal bold 9px Verdana, Arial, sans-serif; /* fonte do texto */
    color: #FFFFFF; /* cor do texto */
    background: #999999; /* cor de fundo */
    border: 1px solid #666666; /* cor da borda */
    padding: 3px;
    display: none;
    text-align: left;
    position: absolute;
    z-index: 1000;
}


O código acima é responsável por adicionar as cores e estilos à caixa de título dos links. Se você tiver conhecimentos em CSS poderá alterar o código como desejar, caso contrário altere somente o que contém comentários à frente. Os comentários estão escritos da seguinte maneira: /* exemplo de comentário */. Se quiser mudar a cor dos elementos, veja esta tabela de cores.

3. Depois de customizar o código, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. Agora é só ir no seu blog e passar o mouse por cima dos links para ver se está tudo certo.

ATENÇÃO: é extremamente importante que você saiba, que para a caixa de título dos links apareça, você deve estar usando o atributo "title" em seus links. Caso contrário, a caixa não aparecerá!

Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, participe deixando um comentário!

Site de origem: Mundo Blogger.

Atualização — 08.10.2011 às 17h58
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 4 comentários neste artigo!

  1. Caraca Igor, seu Blog é muito bom, nunca achei tanta dica boa em um só lugar.
    Porém eu não estou conseguindo utilizar o efeito flutuante para o título dos links, já mudei o local dos Scripts Java e usei os seus tb, mas nenhum dos dois funcionaram, se tiver tempo dá uma ajuda ae.

    Vlw, Obrigado

    ResponderExcluir
  2. Léo: fico muito feliz em saber que o conteúdo do blog está sendo útil de alguma forma! Quanto à sua dúvida, creio que o problema esteja ocorrendo porque você instalou o efeito LightBox no seu blog (Som Batera). O efeito LightBox utiliza a biblioteca de scripts Prototype, e o efeito do tutorial acima utiliza a biblioteca JQuery, e quando estas duas biblioteca são postas juntas no mesmo blog, elas entram em conflito e a biblioteca JQuery pára de funcionar. Então, não adianta mudar o script de servidor, o efeito só funcionará quando você remover a biblioteca Prototype do seu template! Caberá a você escolher qual hack é mais útil para ti, ou procurar algum outro script que crie o efeito na caixa de título dos links sem entrar em conflito que com a biblioteca Prototype. Adicionarei uma nota no começo do tutorial! Desculpe não poder ajudar de uma forma mais efetiva. Agradeço a visita e o comentário. Volte sempre!

    ResponderExcluir
  3. Vlw Igor,
    obrigado por tirar minha dúvida,
    to recomendando seu blog pros meus amigos.

    ResponderExcluir
  4. quando entrei no seu blog notei esse detalhe nos links e ja fui procurar ate achar e implementar no meu template agradecido
    tutorial facil sim e objetivo...
    valeu msm

    ResponderExcluir