TutoPress » qTip http://www.tutopress.com Dicas e tutoriais para seu blog WordPress Fri, 26 Feb 2010 22:05:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Como personalizar links ao passar o mouse? http://www.tutopress.com/dicas-e-tutoriais/como-personalizar-links-ao-passar-o-mouse.htm http://www.tutopress.com/dicas-e-tutoriais/como-personalizar-links-ao-passar-o-mouse.htm#comments Sun, 28 Jun 2009 16:41:30 +0000 Denny Lira http://www.tutopress.com/?p=43 Mais >]]>

Recentemente, venho recebido muitas perguntas de como eu coloquei um recurso que ao passar o mouse sobre os links aparece uma “caixinha” contendo uma informação. Agora eu irei lhes ensinar passo a passo como você poderá ter esse recurso em seu blog!

qTip

É 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 <head>:

<script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>

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

Detalhes adicionais

Nem todos os links irão ter esse recurso. Para que apareça uma “caixinha” em seus links, é necessário que eles tenham o título, ou seja, a tag <a title="">. Portanto para o código funcionar, você terá que colocar o título. Se quiser colocar pelo editor de posts do WordPess, basta inserir uma descrição no link como mostra a imagem abaixo:

descrição do link

;)

]]> http://www.tutopress.com/dicas-e-tutoriais/como-personalizar-links-ao-passar-o-mouse.htm/feed 6