07/05/2013

Tooltip personalizado de várias formas!

Oi pessoal, como estão? Agora é pra valer, minhas aulas voltaram! Confesso que estou morto e por isso ainda não retribui os comentários, nem mesmo no Blog. Não pensei que seria uma correria tão grande assim no começo :S
Como eu disse que tentaria manter o ritmo de postagens alternadas, cá estou eu para trazer mais umas para vocês. Eu estava preparando esse tutorial há algum tempinho e acabei agora pouco! Trouxe 5 tipos de Tooltips personalizados para vocês. pra quem não sabe o que é, no decorrer do Tutorial eu vou mostrar.
Bom, para que o Tutorial funcione, você precisa antes adicionar os códigos no CSS. Primeiro, no Painel do Blogger, clique no nome do seu Blog - Modelo - Editar HTML - Pesquise por: </head>
Antes dessa tag, cole o código abaixo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
Colou? Agora é a hora da "Personalização".

Tooltip 1
Esse é o primeiro Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {
padding: 3px;
border: 2px solid #A2CD5A;
display: none;
background: transparent url(http://media.tumblr.com/tumblr_mej6isPoDA1r16se4.png);
color: #696969; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
}
Tooltip 2

Esse é o nosso segundo modelo de Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {
padding: 3px;
border: 1px double #f5f5f5;
display: none;
background: #FA8072;
color: #ffffff; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;z-index: 1000;
border-radius: 10px 10px 0px 10px;
box-shadow: inset 0 0 8px #f5f5f5;
}
Tooltip 3
Esse é o terceiro modelo de Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {
padding: 3px;
display: none;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUo6TcIcrbswFVpR7qEu2pGDi3vbsFTmvzxKOBnF0ao3xbwL_7FlBrgUvxgNTbooGOgpckHbIBcSSVdVkYqYPL61UYwXaEFSB0fQMihGS8WNN2uIkuegYVx-Br4sEYNududYFqBYXHCG4/s320/2r7pqqa.jpg);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 10px;
}
Tooltip 4
Bom, esse é o modelo de Tooltip número quatro, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {
padding: 3px;
display: none;
border: 1px solid #1874CD;
background: url(http://24.media.tumblr.com/tumblr_m8li27B93N1r44mhto1_500.png);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 2px;
}
Tooltip 5
Esse é o quinto e último modelo de Tooltip que eu trago hoje para vocês, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {
margin:2px;
padding: 5px 5px 5px 25px;
display: none;
color:#78a7c8;
background: #fdfdfd;
border: 1px solid #F5F5F5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font: Century Gothic;
font-size: 10px;
background:#fff url(http://media.tumblr.com/tumblr_lx9va28WQZ1qmyqtl.png)
no-repeat;
text-align: left;
position: absolute;
z-index: 1000;
}
Bom, acho que é isso! Espero que tenham gostado dessas personalizações de Tooltip *-* Deu um trabalhinho pra fazer! Tentarei responder os comentários agora, certo? Beijos :*

41 comentários:

  1. Eu amei o terceiro com aquelas luzes! :3
    Mas acho que vou colocar o segundo no próximo lay! ^^
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode
    Nerd Descolada

    ResponderExcluir
    Respostas
    1. HAHA, Tente fazer coisas bem variadas sabe?
      Ah, usa sim :)

      Excluir
  2. Que fofinhos ! Obviamente eu vou usar, raramente a tooltip pega aqui ASHUASHUASHUA'
    Beijos :3

    Sweet Girl

    ResponderExcluir
  3. Infelizmente temos outras coisas pra fazer a não ser o nosso blog, e isso atrapalha muito, mimimi. Escola/Faculdade/Trabalho são as coisas que mais atrapalham por exemplo, mas é pra vida inteira (a não ser a nossa triste velhice .-.)!
    Enfim, adorei as tooltips, espero que façam sucesso já que deu um 'trabalhinho' pra fazer! Talvez eu uso no próximo layout (;

    ResponderExcluir
    Respostas
    1. É verdade Lê, você falou tudo agora! :S
      KKKK, É, elas deram um trabalhinho mesmo! Obrigado *O*

      Excluir
  4. gostei disso. E é facilzinho! muito bom

    Beijinhos enferrujados

    DAMA DE FERRO

    ResponderExcluir
  5. Deve ter dado um trabalhão preparar esse tutorial massa, e ainda bem organizado e explicado. Parabéns !

    NATEELADOPC.(blogspot.com)

    ResponderExcluir
  6. Adorei o tutorial, é difícil achar bons modelos para tooltips ;-;
    To começando com o meu segundo blog agora, visita lá ^~^
    bjs
    http://heartofdeidara.blogspot.com/

    ResponderExcluir
  7. Muito bacana,vou usar o ultimo efeito...

    Cara quando meu blog abir vamos fazer afiliação????? Responde na minha ask :http://ask.fm/kawaiitutosmf Abraço ....

    ResponderExcluir
    Respostas
    1. Feliz por ter gostado! ^^
      Quando seu Blog abrir eu o avalio :P

      Excluir
  8. Um mais lindo que o outro Alex, arrasou!
    Você tem uma criatividade que eu acho tão perfeita suahsuah' sem contar que para mim tooltip é uma das partes mais importantes do lay *---*
    Raawn :33 | viciadasemcupcake.blogspot.com

    ResponderExcluir
    Respostas
    1. Ain Gih, tu é muito fofa visse? Da vontade de arrochar! -q KKKKK
      Obrigado <3

      Excluir
  9. eu adorei Alex. Vou ver se consigo usar alguma (te creditando, claro) ^^ adoro seus tutorias, por que eles são bem fáceis de fazer (ainda mais pra uma pessoa como eu que não sabe nem pra onde vai!).
    Super beijo pra você ^^

    http://comalcooolico.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah, que bom que você gosta deles... Tento deixá-los o mais claro possível! :)

      Excluir
  10. que lindos os tooltips amei :3 fica bem fofinho quando se coloca-os

    Irresistible Touch (~perfil~)

    ResponderExcluir
  11. Adorei a dica.
    Super útil!
    Abraços!

    senhordoseculo.com
    Beleza para Homens

    ResponderExcluir
  12. Que bacana, gostei do tutorial. Parabéns! =)

    NOSSO CAPRICHO
    apsmass.blogspot.com

    ResponderExcluir
  13. Adorei :3
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
  14. Ótimo tutorial,Alex.Os modelos ficaram lindos ♥

    Até mais :33

    blog-bluesky.blogspot.com

    ResponderExcluir
  15. Que lindos! Adorei, bem diferentes!

    @Escrita de Cabeceira

    ResponderExcluir
  16. Adrei os tooltips, ficaram lindos! O meu preferido foi o segundo. Espero que todos façam bom uso. Beijos.
    the-zombie-attack.blogspot.com

    ResponderExcluir
  17. Adorei as tooltips, são bem úteis deixam o blog ainda mais lindo *u* os modelos ficaram bem legais

    html-detected.blogspot.com.br

    ResponderExcluir
  18. Adogo *-* Ficaram bem fofos e os modelos ficaram uma graça, mas simpatizei com o primeiro.
    - Dão um ar bem legal ao blog.
    TSD

    ResponderExcluir
  19. Tava procurando esse tutorial um tempinho, ele vai me ajudar muito. Vou usar ele no blog :3

    garotadifferente.blogspot.com

    ResponderExcluir
  20. aaaaaaaaaaaa finalmente um que realmente funcionou!
    estou muito grata a você!
    se eu puder ajudar em alguma coisa é só pedir =)
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir