Tooltip com Efeito Hover!

| |


Wow, boa tarde pessoal, todos bem? Eu espero que sim! Então, ontem completei 22 anos de idade, minha nossa estou velha! ~risos~ Notei que algumas blogueiras tem preconceito com pessoas de maiores idade na blogosfera, vamos combinar que o blog não foi feito apenas para adolescentes (sendo que muitos ainda nem chegaram nesta fase da vida), o Blogger é livre para todas as idade, certo?

Este é o primeiro tutorial de HTML que decidi postar por aqui, é útil, afinal todos usamos tooltip! Trata-se de uma maneira bem diferente de se editar um tooltip, eu já o usei em alguns de meus layouts do antigo Milky Sky, nem todos o conheciam então decidi postar este tutorial, certo... Vamos ver?
Primeiramente, obrigada ao the Circus pelo brilhante tutorial!


O que são "Tooltips"?

São mensagens que aparecem em certos elementos quando posicionamos o cursor do mouse sobre aquele link. Neste tutorial iremos aprender a personalizá-lo de uma forma bem divertida.

Como colocar no HTML?

Simples, abra seu HTML e acione a caixa de pesquisa (ctrl+f). Nela procure por: </body>

Acima desta tag, adicione o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>

<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>

<script>

    (function($){

        $(document).ready(function(){

            $(&quot;[title]&quot;).style_my_tooltips();
        });
    })(jQuery);
</script>

Salve. Abra novamente a caixa de pesquisa e busque por: ]]></b:skin>
Acima desta tag, adicione o seguinte código:

#s-m-t-tooltip {
background: #444; /* COLOR DE FONDO */
color: #eee; /* COLOR DE TEXTO */
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 0px; /* ESQUINAS REDONDEADAS */
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}

ps: este é um tooltip normal, para editá-lo continue a ler a postagem...

Como posso colocar os efeitos no tooltip?

O interessante aqui é que você pode criar o seu próprio efeito, desta forma seu tooltip ficará ainda mais original. Mas, se você não está com paciência para pensar em algo funcional, deixo cinco exemplos bem bonitinhos que a Melodie criou:

Efeito "Zoom continuo": Prévia.
Efeito "Repercussão": Prévia.
Efeito "Giro vertical": Prévia.
Efeito "Giro horizontal duplo": Prévia.
Efeito "Vai e volta": Prévia.

Para utilizar qualquer um dos efeitos, substitua o código citado acima pelo código que se encontra na prévia (cole-o acima de ]]></b:skin>).
Até breve!

8 comentários:

  1. PARABÉÉÉNNSSSSS ~ le alok ~ tudo de bom pra vc ^.~
    eu acho uma idiotice esse povo com preconceito de gente mais velha na blogsfera, eu vou fazer 18 anos e tô na blogsfera a sete e ainda não me cansei do blog, apesar de todos os hiatus e tals, as pessoas não se tocam que um dia a gente simplesmente cresce?
    ~~~~
    eu sempre quis aprender a fazer esse coisinho, pedi até pra sun me ajudar mas nunca funciona nos meus skins de modelo antigo, apenas nos novos modelos, não sei o que acontece, pode me ajudar?

    ResponderExcluir
  2. se você tivesse uma cbox eu ia te floodar, porém como aqui só tem comment eu me comporto -q

    ResponderExcluir
  3. Você com 22 e eu com os meus 12 ihuashs. Acho que o importante é o blog então nem ligo pra idade. Não sabia disso de tooltip com hover, gostei muito! >3<

    ResponderExcluir
  4. A parabéns atrasado ( ^▽^ ) a não tá velha não ahsauhs eu não tenho nenhum tipo de preconceito com blogueiras mais velhas,eu acho até que legal!Eu amei o tutorial,muito útil eu procurava feito uma louca,um tutorial assim sério.E que eu acho fofo os tooltip ter um efeito <3 e fofo e-e eu amo coisas fofas <3

    ResponderExcluir
  5. Parabéns Milkyyyyyyyyyyyyyyyy <3
    Amei o tuto *u*
    Qual o tuto de colocar skin no blog mesmo? *3*
    Chuu ~ blueberrycorderosa.blogspot.com

    ResponderExcluir
  6. Parabéns, muitas felicidades, muitos anos de vida >w< Nem ligue pra esse preconceito bobo, como você disse, o Blogger é para todas as idades !
    Adorei os efeitos para tooltlip, principalmente o "vai e volta" <3

    ~kiss
    CS ♥

    ResponderExcluir
  7. Só comentei nessa postagem para dar os meus parabéns atrasados a Bunnys ♥ PARABÉNS BUNNY!! TUDO DE BOOM PARA VOCÊ!!! Espero que tenha comido bastante, ahahah' :D

    E bem, não me importo com essa de "idade", na verdade gostei muito de ter conhecido você, já que é de longe muito simpática, ahaha' e eu aqui com os meus 17? Quem se importa com isso?! Bobagem!! uwu;

    Kissu ♥ Snow

    ResponderExcluir
  8. Só comentei nessa postagem para dar os meus parabéns atrasados a Bunnys ♥ PARABÉNS BUNNY!! TUDO DE BOOM PARA VOCÊ!!! Espero que tenha comido bastante, ahahah' :D

    E bem, não me importo com essa de "idade", na verdade gostei muito de ter conhecido você, já que é de longe muito simpática, ahaha' e eu aqui com os meus 17? Quem se importa com isso?! Bobagem!! uwu;

    Kissu ♥ Snow

    ResponderExcluir