5 de jun de 2014 at 15:06 with


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!

Marcadores:



U are my golden star
Usagi / 24yrs / Personal Blog.

darlings

the past
credits
© 2014 - Codes, design and colors by pinktape. Icons by birdhaus. Bullets and mini-icons by 7THD and kawaii-box.