19.9.13

Modelo para Tooltip


Heey 

Antes de qualquer coisa, muito obrigado pelos comentários da postagem anterior, vocês são tudo pra mim! Bom, como tudo já foi removido, vamos voltar ao normal. Antes eu quero dizer que fiz uma página pros plágios e outra pra vocês denunciaram o plágio aqui do blog anonimamente :) vocês podem encontra-lás no primeiro gadget do blog, o Welcome, no menuzinho cor de rosa! Ahasusua' sou bem criativa, curti isso (y)

Gente, eu tenho percebido que as únicas coisas que eu posto relacionadas com tutoriais e afins, são praticamente só menus. Não que eu não gosto de faze-los, mas isso cansa, então vou dar uma variada legal por aqui ^_^ hoje, venho trazer um modelinho de tooltip super fofo. Prossiga para usa-lo!



 Antes de qualquer coisa, vá em Modelo > Editar HTML > e cole esse código abaixo de <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>
 Depois de um F3 > e procure por ]]></b:skin> acima disso cole o seguinte:

/*--Tooltip Personalizada pelo blog Sweet Flower - sweeet-flower.blogspot.com --*/
@font-face {font-family: PF Arma Five;src: url('http://static.tumblr.com/hhfgqo5/6Dlmfpt2j/pf_arma_five.ttf');}div#qTip {
background: #97c9d9; /*fundo do tooltip*/
font:8px Pf Arma Five;´/*tamanho e tipo de fonte*/
color:#fff; /*cor da fonte*/
text-shadow:0 1px 0 #87abb7; /*sombra na fonte do tooltip*/
position: absolute; /*não mexa*/
padding: 5px; /*não mexa*/
z-index: 100; /*não mexa*/
display: none; /*não mexa*/
}
Pronto, é só salvar e ver se deu certo >< o tooltip é azul, mas você pode mudar as cores conforme o código explica :D Não reblogue sem créditos, risco de barraco e confusão pro resto da sua vida :D se usar credite :D

19 comentários:

  1. Sinto muito pelo plágio, gente invejosa é assim mesmo. Não tem nenhuma preview desse modelinho? Que pena :\ Mesmo assim vou testar, ok?
    Beijos ♡ ~
    Garotas Atrevidas ~ retribui a visita? >3<

    ResponderExcluir
    Respostas
    1. Pois é, fazer o que :(( Infelizmente eu não consegui tirar, vai ter que testar antes mesmo... Ok, te garanto que é bem bonitinho :333

      Excluir
  2. Qu legal. Qualquer dia, posta um tutorial ensinando a criar uma tooltip? Eu não fazia a mínima ideia de que era possível personalizar esse troço!

    Bjus

    ResponderExcluir
    Respostas
    1. Obrigada! Isso é meio complicado... Mas tipo, é só você usar os comandos básicos do HTML, Bg, color, border, font, padding, margin, essas coisas entende? http://kw-guide.blogspot.com.br/ olha ali tem algumas coisas explicativas... Talvez ajude :3

      Excluir
  3. Adorei esse modelo de tooltip, fica super fofo no blog :3
    beijos, boa sexta-feira!
    quemprecisadetvparaverbeyonce.blogspot.com.br

    ResponderExcluir
  4. olaaaa
    como vai?
    goster deste tutorial :33
    bem explicado

    venha visitar,seguir e comentar meu blog:
    gliter-lovely.blogspot.com.br
    é sobre meu manga que estou criando.
    espero que goste^^

    ah!ja to te seguindo ta?

    bjooos <3

    ResponderExcluir
  5. Adoreii o tuto!!
    Post novo no blogue, visita??? luisascuteworld.blogspot.com
    bjsss

    ResponderExcluir
  6. Fico feliz que tudo tenha se resolvido.Amei o modelo de tooltip.Beijos.
    sckittyworld.blogspot.com

    ResponderExcluir
  7. vei na boa ameiiiii !!
    http://seututorialmeututorial.blogspot.com.br/

    ResponderExcluir
  8. Gente mas que blog perfeito *u* Estou seguindo amei de verdade seu lay ><' Amei o tuto^^ Kisses *3*
    -Trufa de Menta

    ResponderExcluir
  9. Eu queria uma Preview mas mesmo assim deve ser lindo u__u

    Bjos ~ |15 Days || Retribui?

    ResponderExcluir
  10. Eu também já sofri plágio e sei o quanto é desesperador. A garota que me plagiou era uma "amiga". Pra ganhar uma vaga de postadora em um um blog de HTML ela pegou meu material e falou que era dela afs' UHUASHUASHUASHUA -q U-U
    Adorei o modelo de tooltip, estava mesmo precisando salvei aqui c:

    Beijos ;3 |SW ~Aguardo sua visita

    ResponderExcluir
  11. Essa tooltip é muito fofa , quem saiba eu use no próximo lay >.<
    Gostaria de saber se posso fazer parte da elite ?
    2bjs Bibs
    Pandarise.blogspot.com.br

    ResponderExcluir
  12. que linnndinho!
    ps: post novo, passa lá querida leitora ;*
    beijos,
    Pedaços de Lembranças

    ResponderExcluir
  13. Sinto muito pelo plágio :c
    Ótimo tutorial, bem explicadinho >.<

    ~ Beijos ;*
    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
  14. Olá,muito legal o post,e seu blog é lindo Parabéns,Bjss!

    garota-com-lilas.blogspot.com.br

    ResponderExcluir
  15. Awn que cute *U* amei o tool tip
    seguindo e.e
    Posso fazer um pedido de tutorial? Tipo ensina como fazer essa bordinha tracejada no photofiltre ou ps? vlw o/

    geekegirlie.blogspot.com

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.