Dicas e Tutoriais de WebDesign .: Como personalizar links ao passar o mouse

Como personalizar links ao passar o mouse

Posted by Rafael | | Category: HTML |

É um processo bem simples, então vamos lá:

O Script

Antes de iniciar o tutorial, gostaria de avisar que o responsável por esse efeito é um script chamado qTip. Ele pode ser usado em qualquer site ou blog que possibilite editar os códigos, ou seja, esse script não funciona em blogs WordPress.com e provavelmente também não funcione em blogs do Blogger.

Colocando a mão na massa

Primeiramente, você deve fazer o download do script aqui (ou clique com o botão direito do mouse em cima deste link e selecione Salvar Link como…). Recomendo que você salve em um lugar muito simples de achar no seu blog/site, por exemplo: Envie seu arquivo para a pasta raíz do site, sendo assim o resultado será: http://meusite.com/qTip.js.

Feito isso, vá até seu arquivo CSS do seu tema. No WordPress, o arquivo está normalmente localizado na pasta do seu tema, com o nome style.css. Cole esse código abaixo do body{}:

div#qTip {

padding: 3px;

border: 1px 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;

}

Você pode personalizar as cores e a fonte do qTip.

Porém, o processo não é tão simples assim, agora você vai ter que colar um pequeno código no arquivo do cabeçalho do seu tema, para “chamar” o script que você enviou para a pasta raíz do seu tema. Abra o header.php e cole o código abaixo entre a tag :

Abra a página inicial do seu blog, e seja feliz.