Trouxe um tutorial bem útil para vocês: como personalizar o tooltip. Mas, antes de tudo, vocês sabem o que é Tooltip?
"Tooltip terminologia em inglês ou dica de contexto é aquela moldura pop-up que abre quando você passa o mouse sobre um elemento HTML (normalmente uma palavra em um texto ou uma imagem) e que contém uma explicação adicional sobre aquele elemento que recebeu o ponteiro do mouse sobre ele.
É utilizado em conjunto com um cursor, normalmente um ponteiro do mouse. O usuário pára o cursor sobre um item, sem clicar ele, e uma pequena "caixa hover" aparece com informações complementares relativas ao item."
Simplificando? É essa caixinha com o texto Postagens mais antigas:
Querem aprender a personalizar essa caixinha? É só clicar em "Leia Mais".
A primeira coisa a se fazer é ir em Modelo > Editar HTML. Lá, procure por </head> usando Ctrl + F.
ACIMA dessa tag, cole:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
Depois, usando Ctrl + F novamente, busque por ]]></b:skin> .
Assim que achar, cole ANTES dessa tag:
div#qTip {padding: 3px;background: #eee5de; /* Cor de Fundo*/color: #8b8378; /* Cor da Fonte */position: absolute;z-index: 1000;border: 1px solid #8b8378; /* Cor da Borda */display: none;font: bold arial;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
O código já está bem explicado por si só:
#eee5de é a Cor do Fundo.
#8b8378 é a Cor da Letra.
#8b8378 é a Cor da Borda.
Alterem usando a Tabela de Cores.
Visualizem e se estiver correto, salvem.
Para usar o Tooltip:
Na elite de afiliados já deve estar funcionando. Porém, para usar em outras circunstâncias, vocês vão precisar de alguns códigos.
Para links:
<a href='Link Aqui' title='Título do Link'>Nome do Link</a>
Para imagens:
<img src='URL da imagem' title='Nome da Imagem para Tooltip'/>
Personalizem como o mandado. Coloque os códigos na área de postagem trocando Escrever por HTML:
Parece ser meio trabalhoso, mas é muito fácil!
Espero que tenham gostado e entendido.
Beijos,
Mrs. Nightshade.
Olá! Amei o tutorial!! Não sabia o que era tooltip, mas você me ajudou de montão!!!
ResponderExcluirBeijos!!
Olá! Que bom que gostou :D Fico super feliz em ter ajudado :D
ExcluirBeijos!