Anna / 26 / gemini
Let's throw our all at each other and grab hold of the future! The sky and this ocean are both on our side Shining and saying, "Go do your best!" To let our voices reach far, far away Shall we shout our dreams even louder? (Full of hope) Today pulls tomorrow toward itself It's really fun to grasp the magnet in my heart and run right now (Let's always go together!) What shall we do about the future!? As they look for the shape of their dreams, everyone laughs and cries Because I'm sure the future us will have the answer Let's run with everything we have While singing and getting wet by the rain I believe the sky will definitely clear Let's try calling out with a cheerful, cheerful voice And we'll surely meet our big dreams I want to grow, and so one by one I'll overcome my inabilities In the midst of waves of clouds, a new blue sky is waiting, waiting for us Let's fly off with high expectations!! I want to go, With this kind of vigor, whether I cry or laugh Our expectations are giving us lots of signals So don't run away, catch hold of this chance! I live, I live Love Live! days!! If we throw our all in, won't it come true, this... dream? What shall we do about the future? The shape of their dreams Ah Everyone is looking for it, everyone! Let's fly off with high expectations!! I want to go, with this kind of vigor, whether I cry or laugh Because I'm sure the future us will have the answer Let's run with everything we have, and catch hold of this chance! Let's become the shining wind We got dream!

5.6.14

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

C
LAYOUT FEITO PELO GNMH, NÃO COPIE!