Efeito flutuante para o título dos links

Compartilhar:
Olá pessoal, venho trazendo uma coisinha para vocês. É um efeito que se chama ToolTip, ele substitui o indicar de detalhes do Windows (ou qualquer outro sistema) por um personalizado, mas vale lembrar que só funciona no seu blog e não no sistema operacional. Veja como fica dentro do blog, antes e depois.


1. Clique na guia Modelo e clique no botão Editar HTML.
2. Faça uma cópia de segurança do seu template, clicando em: Baixar modelo completo.
3. Pressione as tlecas Ctrl+F e procure por:
</head>
4. Imediatamente acima dela, cole este código:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://categoriabloggeruplod.webs.com/JavaScript/qTip.js' type='text/JavaScript'/>

5. Logo depois, procure por esta tag:
]]></b:skin>
6. E cole acima dela este código:


div#qTip {
padding: 3px;
border: 1px solid #666;   ---/* edite cor da borda */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;  ---/* edite cor de fundo */
color: #FFF;  ---/* edite cor do texto */
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}
Este código é responsável pela personalização do hack. Para fazer as edições terá que ter um código hexadecimal para prosseguir.

7. Depois de customizado, clique em Visualizar, para conferir se estar tudo correto e logo após, clique em Salvar modelo.

8. Para o efeito ocorrer é preciso usar este código:
<a href='ENDEREÇO-DO-LINK' title='DESCRIÇÃO-DO-TITULO' target='_blank'>NOME-DO-LINK</a>
Substitua o que se pede e pronto! Até a próxima!
► Postagens Relacionadas:

1 Comentário

Bruno Bezerra disse...

Gostei desse efeito, bastante profissional e dinâmico, acrescenta mais valor à estrutura de um blog.

17 de janeiro de 2014 às 13:00

Postar um comentário