O tooltip da maioria dos sistemas operacionais não tem uma das melhores aparências, por isso, personalizá-lo é algo importante caso você queira deixar o seu blog com um toque mais profissional. Caso você não saiba o que é um tooltip, passe o mouse aqui!
1 Vá em Tema > Editar HTML > Clique na caixa de códigos e aperte Ctrl + F ou F3 > Procure por <head> > Cole abaixo o seguinte código:
2 Ainda na caixa de códigos, procure por ]]></b:skin> > Cole acima o seguinte código:
3 Faça as alterações necessárias.
4 Salve.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>
<script src='http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js'/>
<script>
(function ($) {
$(document).ready(function () {
$("[title]").style_my_tooltips({
tip_follows_cursor: true,
tip_delay_time: 20,
tip_fade_speed: 400,
attribute: "title"
});
});
})(jQuery);
</script>
Se você já tem o jQuery importado no seu blog, você pode remover a primeira linha do código acima. É importante destacar que o jQuery deve estar importado antes do código do tooltip.
#s-m-t-tooltip {
background: #ccc; /* Cor do fundo */
border: 1px solid #333; /* Cor da borda */
color: #fff; /* Cor da letra */
padding: 5px; /* Margem interna */
-webkit-animation: CH 600ms;
margin: 20px 20px 20px 8px;
z-index: 99999999999999999;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
Esse tutorial é super útil <3 Eu até que sei cozinhar.
ResponderExcluirVisite o blog :3 | Etc For Me :3
Eu também não sei cozinhar,é que sou vuada então não posso nem tentar kkk' Eu adoro este tutorial é bem útil.Nossa seu layout é incrível,céus,que perfeição!
ResponderExcluirthose--eyes.blogspot.com
Oie...
ResponderExcluirvaleu pela dica... ^_^"
tente cozinhar;;; é uma maravilha!!!
beiinhos
tem homenagem no blog!!!
http://vanessacupcake.blgspot.com
Vc pelo menos sabe fazer ovo, suponho que seja frito, nem isso eu sei... eu fujo da cozinha. Já tentei cozinhar mas, tipo, eu perco a fome depois de ver minha comida -kkk- .
ResponderExcluirTooltips são uma graça! *--* No lay que estou terminando de fazer eu utilizei um que tem o código menor... Esse é o mesmo Tooltip do seu menu ?!
Sim, esse tooltip do menu se aplica para todo o blog.
ExcluirOlá, bom dia! Fiz esse tutorial, mas, não funcionou. :( Não achei o erro ainda aparentemente... Estou usando quase todos os tutoriais daqui, haha. Também o seu blog está bem completo para personalizar qualquer bloguinho. :)
ResponderExcluirOi Tom!
ExcluirO tutorial estava com um erro no Passo 1. Fiz a correção, agora deve funcionar direitinho!
Obrigado por utilizar nossos tutoriais, se quiser pedir algo em específico, fique à vontade para utilizar o formulário na página de Contato!
Atualizado novamente.
ExcluirOlá, boa noite!
ExcluirAgora funcionou perfeitamente. :) Obrigado. Desculpe, mas, antes não funcionava mesmo...
Sem problemas, obrigado por avisar que estava com problemas haha
Excluir