Efeitos Javascript Vanessa S.
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.
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.
Como que Faço Pra colar esse Efeito no Postagem Popular ?
Opa show de bola funcionou perfeitamente, era o que eu precisava. Obrigado!!!!
Ainda esta funcionando?
Oi Clau… Só para lembrar esse codigo não esta funcionando mais… Abraços
Holtz
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)
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
desculpa, o efeito funcionou, foi a minha falta de paciencia que nun deixou o script carregar… nun precisa aprovar nenhum dos dois comments xD
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?
Legal o Tutorial, adiantou muito o processo de criação do template do me blogger!
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
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.
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
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;
Mas Clau, me ajude como colocaria a pontinha do balão?
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.
Ah, outra coisa, esse tooltip suporta HTML?
Clau, tem como fazer um balão de fala?
presiso de uma ajuda é que eu queria saber como por uma foto tipo blãozinho de conversa ou igual ao seu
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?
Van Rox
Experimenta incluir "margin-top:XXpx;" no código CSS do 2º passo do tutorial.
Estipule um valor no lugar de "XX".
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 😀
estou com dificuldade de instalar o Jquery, poderia me ajudar?
Clau, que pena que isso naum funcionou no meu blog, mas vlw do msm jeito *__________*
Muito bom, obrigadão Clau!!
Colocando-se imagens fica muito lindo (:
JCMais
Se há, eu não conheço. O.o
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?
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…
Nossa que burrice minha. =/
Perdão,agora que ví.
Lucas
Me desculpe, mas acho que vc não está prestando atenção no tutorial! Releia o tutorial, por favor.
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.
eu testei mas com esse codigo não funcionou mas valeu igua
🙂
@Jorge Stochero:
De WP eu não entendo quase nada, mas é uma questão de vc tentar. Testa e vê se funciona.
eu queria saber se tem como fazer isso no wordpress?
valeu
@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.
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!
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!
Muito bom mesmo, vlw! procurava isso para meu blog, abs!
Cara vlw por atender meu pedido. =D
Vai ajudar na construção do meu template.. Vlw msm.
No meu blog n funcionou… instalei o javascript corretamente conforme o tutorial, pode ser pq o meu template é adaptado do wordpress ?
Adorei a dica Clau ^^
Estou usando no meu blog.
Realmente é um efeito muito interessante esse.
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
vlw @Gothic Darkness, pedi esse tuto se não me engano ontem, e vc ja fez, muito obrigado msm lol ficou muito massa