Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498550881
Vida do cache: 1498594081
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos Javascript

Crie Efeito Tooltip nos links do Blog com JQuery qTip

Hoje você vai aprender como colocar um efeito nas descrições dos títulos de links dentro de uma caixinha azul.
Este efeito funciona a base de um script e faz com que as descrições dos títulos de seus links se apresentem de forma diferente e personalizada.
Além de ser leve e bem funcional, com ele, se você aplicar uma breve descrição em qualquer link, aparecerá uma caixinha personalizada, quando o mouse está sobre o link, exibindo a descrição dos seus links, nesta caixa personalizada.

IMPORTANTE: É necessário que você esteja usando o atributo “title” na tag de âncora, para o efeito funcionar, ou seja, só funciona em links que tenha descrição de títulos.

tooltips-qtip

Para conseguir este efeito, é necessário a incorporação de um script à base da biblioteca JQuery e inserção de CSS em seu template.
O que vamos fazer é criar uma “ToolTip” com Javascript jQuery.

[alerta]Importante:
Este script funciona em conjunto com a biblioteca do JQuery, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.[/alerta]

1. Instalar o Javascript:

Copie o código abaixo e cole-o antes de </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>

 

2. Aplicar estilos CSS:

Vá na aba “design”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:


div#qTip {
padding: 3px;
border: 1px solid #666;   ---/* edite cor da borda */
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background: #999;  ---/* edite cor de fundo */
color: #FFF;  ---/* edite cor do texto */
font: bold 9px Verdana, Arial, sans-serif;
text-align: left;
position: absolute;
z-index: 1000;
}

Prontinho! Agora é só personalizar a caixinha de acordo com as cores de sua preferência.
Use a imaginação!

Lembre-se: Esse efeito irá funcionar em todos os links automaticamente, desde que eles possuam descrição de títulos.

Para entender melhor, veja um exemplo de link com descrição de titulos logo abaixo:


<a href='ENDEREÇO-DO-LINK' title='DESCRIÇÃO-DO-TITULO'>NOME-DO-LINK</a>

Lembre-se também que, a funcionalidade deste script pode variar de acordo com o template.

Créditos do script: qrayg.

Artigo atualizado em dez/2012.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

42 Comentários

  1. Jefferson disse:

    Como que Faço Pra colar esse Efeito no Postagem Popular ?

  2. Aquiles Maior disse:

    Opa show de bola funcionou perfeitamente, era o que eu precisava. Obrigado!!!!

  3. Potter disse:

    Ainda esta funcionando?

  4. Holtz disse:

    Oi Clau… Só para lembrar esse codigo não esta funcionando mais… Abraços

    Holtz

  5. digratisps3 disse:

    Dica muito boa, mas o que estou procurando é um pouco diferente, deixa eu ver se consigo te explicar:

    Queria criar uma lista de tópicos em uma página estática ex:

    * Item 1
    * Item 2
    * Item 3
    etc….

    e dentro de cada item eu iria escrever um texto com imagens e videos talvez, mas gostaria que tivesse o seguinte efeito:
    quando eu clicasse no Item 1 o texto aparecesse embaixo dele e desaparecesse quando eu clicasse novamente no Item 1, ou então no item seguinte, e assim por diante. Já encontrei scripts que fazem isso, porém, exibem no máximo 3 intens por post, gostaria de saber se você conhece algum código que eu possa colocar vários em um mesmo post ? (Quase escrevi um livro aqui….rs)

  6. Principe Encantado disse:

    Estou mesmo procurando por um tudo e o seu esta sensacional funciona certinho mas em meu caso eu gostaria que funcionasse apenas numa gad onde coloco os banners. Tem como fazer assim ao invés de funcional em todos os links do blog?
    Desde já agradeço sua colaboração.
    Abraços forte

  7. Felipe Correia disse:

    desculpa, o efeito funcionou, foi a minha falta de paciencia que nun deixou o script carregar… nun precisa aprovar nenhum dos dois comments xD

  8. Felipe Correia disse:

    Muito bom esse post.
    Tem como colcoar em imagem, percebi que no seu menu la em cima tem.
    Ja tentei colocar nas imagens, linquei as imagens para ver se era só om links e tal, mas nada!
    iai tem como?

  9. Nerd Flanders disse:

    Legal o Tutorial, adiantou muito o processo de criação do template do me blogger!

  10. ? Lucy Sem Fronteiras ? disse:

    Puxa que pena, Clau!

    Eu uso um template Dicas Blogger, e sempre dá tudo certinho quando aplico tutoriais tanto da Ju como teus.
    Ahh que pena.. queria muito usar mesmo.
    Mas se ficar assim vou ter de tirar, pois achei meio exagerado o tamanho da letra que não muda nem por decreto.

    Obrigada,

    Lucy

  11. .:: Clau ::. disse:

    Lucy
    Se vc fez tudo certinho e não deu certo, não tenho como te ajudar, pq não há como eu saber o q ocorreu no seu template.

  12. ? Lucy Sem Fronteiras ? disse:

    Olá Clau!

    Será que você poderia me dar uma 'luz'?

    Eu queria tanto, há tempos este efeito, e até consegui colocar em meu blog, mas a questão é a seguinte:
    de todas as modificações que faço, as únicas que aparecem e consigo personalizar, são as cores da borda e de fundo.
    Mas a cor da fonte (que já alterei no campo indicado), e tb o tamanho da fonte, que está muito grande para meu template (mudei tb ali em 'px' no campo fonte), mas elas não modificam.

    Fiz tudo certinho mesmo, aliás, já apliquei vários tutoriais teus até mais complicados e consegui perfeitamente.
    Mas mudo ali e não modifica.
    Queria a letra pequenina igual aqui em teu blog.
    Será que poderia me dizer o que está ocorrendo de errado ou como poderia mudar isso?

    Desde já muito agradecida.

    Beijos no coração, direto do meu;)

    Lucy

  13. .:: Clau ::. disse:

    Bristol
    Olha eu não testei, não tenho como te ajudar, assim, mas pq vc não testa incluir a imagem que vc quer utilizar em "background".
    No trecho de código CSS, substitui a linha: background:#999;
    por: background: #999 url(endereço-da-imagem)no-repeat;

  14. Bristol disse:

    Mas Clau, me ajude como colocaria a pontinha do balão?

  15. .:: Clau ::. disse:

    Nandu
    Não tenho como te ajudar em relação ao "alt" do seu template. Vc vai ter que verificar e tentar descobrir o que ocorreu.
    Sobre arredondar as bordas no tooltip, leia o artigo:
    "Bordas Arredondadas com CSS3" que temos publicado. Com certeza vai te ajudar.

    Filipe,
    Bristol

    É questão de vcs tentarem colocar uma imagem em forma de balão e ve se dá certo.

  16. Bristol disse:

    Ah, outra coisa, esse tooltip suporta HTML?

  17. Bristol disse:

    Clau, tem como fazer um balão de fala?

  18. filipe willian disse:

    presiso de uma ajuda é que eu queria saber como por uma foto tipo blãozinho de conversa ou igual ao seu

  19. Nandu disse:

    Clau, vlw por todos esses tutorias, pq eh dificil achar, as pessoas nao gostam de ensinar as outras, guardam a sabedoria para si, mais vc sabe como dividir a sabedoria com todos, admiro muito isso em vc, adorei o blog.

    Eu colokei no meu blog, funcionou, porem, em cima dele aparece o (alt=) ai naum da para ver o tooltip, como eu tiro isso, acho que o alt no meu template ta como title, e como eu aredondo a area do tooltip como o seu?

  20. .:: Clau ::. disse:

    Van Rox
    Experimenta incluir "margin-top:XXpx;" no código CSS do 2º passo do tutorial.
    Estipule um valor no lugar de "XX".

  21. Van Rox disse:

    consegui fazer funcionar no me blog, mais quero que fique com uma distancia da SETINHA do mouse com a legenda que aparece, como fazer isso?

    que quando aparece a "legenda" tipo
    POSTAGENS MAIS RECENTES
    aparece bem mais em baixo da setinha
    do meu caso, aparece bem em cima!
    como modificar isso, fazendo essa "distanciação"

    beijos, amo seu blog 😀

  22. Van Rox disse:

    estou com dificuldade de instalar o Jquery, poderia me ajudar?

  23. Andreza disse:

    Clau, que pena que isso naum funcionou no meu blog, mas vlw do msm jeito *__________*

  24. Edu Rodrigues disse:

    Muito bom, obrigadão Clau!!
    Colocando-se imagens fica muito lindo (:

  25. .:: Clau ::. disse:

    JCMais
    Se há, eu não conheço. O.o

  26. JCMais disse:

    Clau, faz tempo que estou procurando mais não encontro. Então tenho que recorrer às pessoas competentes. :)
    Tem como colocar um efeito FadeIn() ou FadeOut(), ou até mesmo um SlideUp() SlideDown() no Tooltip?

  27. Rickzinhocps disse:

    Olá clau, gostaria de saber como adicionar este efeito que você adiciona no seu, que deixa a caixinha meio transparente mas ainda com a cor que você decide.

    Ah, e minha caixinha ficou bem legal depois que eu adicionei um efeito de bordas arredondadas nele.

    Agora vou testar pra ver se funciona o efeito shadowbox(só pra mostrar pra galera que dá pra deixar a caixinha bem legal)

    Fui…

  28. Lucas disse:

    Nossa que burrice minha. =/

    Perdão,agora que ví.

  29. .:: Clau ::. disse:

    Lucas
    Me desculpe, mas acho que vc não está prestando atenção no tutorial! Releia o tutorial, por favor.

  30. Lucas disse:

    Clau,percebi que è necessàrio ter essa biblioteca Jquery,você possui um tutorial á ela em seu blog? Procurei no ìndice mais não encontrei instruções para instalà-la.

  31. Jorge Stochero disse:

    eu testei mas com esse codigo não funcionou mas valeu igua
    :)

  32. ::Clau:: disse:

    @Jorge Stochero:
    De WP eu não entendo quase nada, mas é uma questão de vc tentar. Testa e vê se funciona.

  33. Jorge Stochero disse:

    eu queria saber se tem como fazer isso no wordpress?
    valeu

  34. ::Clau:: disse:

    @Vanessa Pereira:
    Viu só? É só usar a imaginação que dá pra aplicar o efeito em outras coisas sim.

    @Janaina Barreto:
    Pode ser que tenha a ver sim, é questão de vc ir modificando e testando até ver se dá certo.

    Pessoal obrigada pelos comentários.

  35. Janaina Barreto disse:

    Oi, Clau!
    Uma dica exelente! Funciona certinho e deixa o blog muito chique. *—*
    Mas, uma pergunta: a garota ali em cima disse que tbm ficou nas imagens. No meu caso, não ficou. Você acha que usar classes para as imagens interfere? Porque tenho várias classes pra cada tipo de imagem.

    Obrigada!

  36. Vanessa Pereira disse:

    Consegui usar também nas imagens! Ficou lindo! Coloquei até um pequeno png como ícone antes do title! =)

    http://allthatglitterssssssss.blogspot.com/ (blog ainda em construção)

    Quase tudo que eu faço no meu template vem daqui e do Bloggersphera! Vcs são demais! Obrigada!

  37. Clube da risada disse:

    Muito bom mesmo, vlw! procurava isso para meu blog, abs!

  38. EwertoN disse:

    Cara vlw por atender meu pedido. =D
    Vai ajudar na construção do meu template.. Vlw msm.

  39. .::GEEH::. disse:

    No meu blog n funcionou… instalei o javascript corretamente conforme o tutorial, pode ser pq o meu template é adaptado do wordpress ?

  40. AnneKira™ disse:

    Adorei a dica Clau ^^
    Estou usando no meu blog.
    Realmente é um efeito muito interessante esse.

  41. L. Tadeu disse:

    PERFEITO! Funcionou perfeitamente no meu template, valeu pela dica =D…
    Em questão da parceria eu entendi que meu blog não se encaixa no que sua Política de parceria pede, mais mesmo assim faço questão de divulgar seu site no meu,
    Trabalho perfeito =p

  42. Kakashi disse:

    vlw @Gothic Darkness, pedi esse tuto se não me engano ontem, e vc ja fez, muito obrigado msm lol ficou muito massa

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.