Seguidores

pesquise aqui

Veja: Como se faz "Novo efeito tooltip para Tumblr"

Novo efeito tooltip para Tumblr


..."como colocar efeito tooltip 
(personalizar a “janelinha” 
que aparece quando se 
coloca o mouse sobre um link)"

Exemplo tooltip


"Neste tutorial 

... ensinar -se-há
 um ainda mais fácil de usar, 
e com dicas melhores ainda 
de como você pode personalizar seu tooltip !"

"Uma das primeira coisa que recomendo fazer é guardar uma cópia do código do seu theme no seu computador, para caso algo dê errado na hora de salvar, ou você queira reverter depois."

"Após isso, 

você simplesmente 
deve colar 
antes da tag </head> do seu theme"
o seguinte código


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src=”http://tumbletricks.webs.com/novo_tooltip.js”></script>
<style>
a:hover {
  position: relative;
}
a[data-title]:hover:after {
  content: attr(data-title);
  position: absolute;
  left: 100%;
  top: 110%;
  padding: 4px 8px;
  color: #333;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
</style>

"E pronto, 
seu "tooltip" já está pronto ! "
 

Você pode personalizá-lo de 

diversas formas, 
mudando, 
adicionando e
 removendo propriedades 
dentro do marcador 
a[data-title]:hover:after”.

"Uma observação a ser feita é que as seguintes propriedades não devem ser removidas:"
content: attr(data-title);
position: absolute;
left: 100%;
top: 110%;


"Com excessão dessas, você pode alterar qualquer uma, 

e,
se não souber CSS, 
você pode usar este site para gerar os estilos para você, 
e depois é só colar no seletor: 
CSS3 Generator."

"Lembrando que,

 para que a tooltip apareça, seu link deve ter um título. "

"Para colocar um título,  
você deve seguir fazer 
segundo a imagem abaixo, 
 quando estiver colocando 
um link no seu post:"

Coloque o título naquele campo

Caso o link seja diretamente no theme, 
não se esqueça de colocar 
o título dele no atributo title !


Leia também:

Nenhum comentário ainda.?!



Nome (obrigatório)


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

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


Nenhum comentário:

Postar um comentário


Mensagem do formulário de comentário:

Formulário de contato

Nome

E-mail *

Mensagem *

▼Arquivados

... ...
 
Ir abajo Ir arriba
|Template by ebds|http://trocadebanners.blogspot.com|