Saiba :"Colocar efeito tooltip nos links do seu Tumblr"
Autor: edilene | Publicado: 2014-04-26T18:51:00-07:00




Saiba :"Colocar efeito tooltip nos links do seu Tumblr"











&nbsp;..."o
 que é tooltip, pois alguns usuários não sabem o que é, ou simplesmente 
conhecem o efeito por outro nome."Primeiramente, coloque o mouse sobre este link por uns instantes: TumbleTricks.
 Você verá que aparecerá um retângulo contendo o título do link (ao 
longo do tutorial você verá como colocar este título). Porém este link 
ainda não está com tooltip, acesse este link, e coloque o mouse sobre o link que está nesta página: link com tooltip.&nbsp;

Você notará que a “janelinha” com o título do link está personalizada.Este
 efeito é chamado tooltip, e você pode personalizar esta janelinha da 
maneira que quiser =) Por isso, caso queira personalizar os links do seu
 Tumblr desta maneira, continue lendo o tutorial&nbsp;!A primeira coisa a se fazer é incluir o seguinte código antes de &lt;/head&gt; no código do theme do seu Tumblr:




&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script
 language="JavaScript" 
src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" 
type="text/JavaScript"&gt;&lt;/script&gt;&lt;style&gt;div#qTip {&nbsp;&nbsp;&nbsp; padding: 2px;&nbsp;&nbsp;&nbsp; border-right-width: 2px;&nbsp;&nbsp;&nbsp; border-bottom-width: 2px;&nbsp;&nbsp;&nbsp; display: none;&nbsp;&nbsp;&nbsp; font: bold 9px Verdana, Arial, sans-serif;&nbsp;&nbsp;&nbsp; text-align: left;&nbsp;&nbsp;&nbsp; position: absolute;&nbsp;&nbsp;&nbsp; z-index: 1000;&nbsp;&nbsp;&nbsp; background: # COR_DO_FUNDO;&nbsp;&nbsp;&nbsp; color: # COR_DA_LETRA;&nbsp;&nbsp;&nbsp; border: 1px solid # COR_DA_BORDA;&nbsp;&nbsp;&nbsp; border-radius: CURVATURA_DA_BORDApx;}&lt;/style&gt;
Agora, personalize os itens:

#COR_DO_FUNDO
#COR_DA_LETRA
#COR_DA_BORDA
CURVATURA_DA_BORDApx.

Os itens de cor devem ser substituídos por cores CSS, que você pode gerar neste link: gerador de cores CSS.A curvatura da borda simplesmente indica se o retângulo terá a borda arredondada ou não.Você
 pode substituir por “0px” (sem as aspas) para que o retângulo tenha as 
bordas quadradas, ou por um valor pequeno (entre 5 e 15) para deixá-lo 
redondo. Por exemplo: “10px” (sem as aspas).Os demais valores do código não devem ser alterados, e nenhum dos ponto-e-virgulas também não devem ser removidos do código.Pronto, agora o script está instalado. Veja abaixo como colocar o conteúdo daquela janelinha.

Há dois modos de colocar o conteúdo da janelinha.Se você que apareça no link de algum post, quando for colocar o link, faça assim:Escreva
 a palavra (ou coloque a imagem, enfim) que você quer tornar um link. 
Depois selecione a palavra, e clique sobre o ícone da corrente que fica 
na parte de cima do editor do post:Uma nova janela igual a esta abrirá para você configurar o link:Onde está indicado pelo número 1, você coloca para qual a URL o link aponta.Agora (preste bastante atenção), no item 2 você coloca o conteúdo da janelinha que aparecerá. Sempre
 que você quiser que a janelinha apareça para algum link do seu post, 
você deverá colocar o que você quer que aparece neste campo 2 na hora de
 colocar o link.Depois clique em “Insert” (número 3) e o link está pronto. Mas veja, depois de colocar, o a janelinha NÃO aparecerá na hora que você edita o post nem na Dashboard, ela aparecerá apenas no seu Tumblr.E é assim que configura links para aparecerem aquela janelinha em posts =)Se for colocar um link direto no código do seu theme, o código será o seguinte:

&lt;a href="URL QUE O LINK APONTA" title="CONTEÚDO DA JANELINHA"&gt;NOME DO LINK&lt;/a&gt;

Pronto! 

"Agora sim, se configurado corretamente (não se esqueça de ler TODO o
 tutorial e com atenção, se você simplesmente colar o código ele não irá
 funcionar), o efeito deverá funcionar e, assim, deixar seu theme do 
Tumblr mais atraente ."
&nbsp;" tutorial foi feito com base no tutorial de efeito tooltip do blog Mundo Blogger."



 








 



 

 

Leia também:

 
 


Novo efeito tooltip para Tumblr
Mais sites com cursores para Tumblr
Como colocar olhos vigiando seu Tumblr
Post Temático - Natal
Mouse com cauda de cometa




  














Por:

Talysson Oliveira Cassiano

fonte e créditos:

tumbletricksnet

&nbsp;

Nenhum comentário ainda.?!






Nome (obrigatório)
▼ 

        
email (não será divulgado *)
(obrigatório)
▼ 

        &nbsp;
seu website*/
 (obrigatório)
Escreva&nbsp;
seu comentário&nbsp;
aqui▼