O tutorial de hoje foi pedido pelo ask (quase todos que eu posto são), e é de como fazer aquela mensagem colorida que aparece quando passa o mouse em um link ou imagem. O nome disso é tooltip e é não é difícil usá-lo. Veja como fica:
Vamos começar? Vá no seu modelo HTML, e procure por <head>
Cole abaixo de <head> esse código:
Código
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>
Agora aperte Ctrl+F novamente e procure por ]]></b:skin> Para facilitar digite apenas ]]> e dê enter que você irá encontrar o código.
Acima de ]]></b:skin> cole este código:
Código
div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}
Agora é só mudar as cores e fontes como você quiser e salvar!
Para o tooltip aparecer, quando colocar um link em algo, utilize esse código:
<a href="link" title="Descrição do link">Texto linkado</a>
Onde está escrito descrição do link, você vai por o texto que quer que apareça quando passar o mouse. O mesmo código pode ser usado em imagens, igual eu fiz na equipe do blog:
<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>
Simples não? Espero que tenham gostado! Ah, antes de ir, vocês já viram o clipe novo do Psy? A música não sai mais da minha cabeça! ~Allangga molla ♪
Eu tava preucurando esse efeito to precisando muito de tutoriais
ResponderExcluirMuito legal essa tooltip! Muito bonitinha ;33
ResponderExcluir- http://caramelises.blogspot.com.br/ // Beijos!
Adorei, vou usar no próximo layout.
ResponderExcluirhttp://with-you-s2.blogspot.com
Tooltip é um daqueles detalhes que parece "invisível" mas fica muito lindo personalizado! Parabéns!!
ResponderExcluirbeeijos millah
forget-dream.blogspot.com
Adorei, o que estava no meu blog, não estava funcionando :/
ResponderExcluirÓtimo tutorial Liah! Divando como sempre u.u
Kisses ;*
~ The Things Girls // Ajude-me com a meta? (Retribuo)
oi Liah, adorei o tutorial. Vc explica muito bem os tutoriais. bjs
ResponderExcluirquatroestacoes.blog.br
melhoras pra vc e boa sorte na auto-escola! graças a Deus eu ja tenho minha habilitaçao, eh mto bom dirigir. cuidado hein?! rs bjkassss
Adorei o tuto! O resultado é muito fofo! @justlikethat
ResponderExcluirmt bom libs!
ResponderExcluirtu que fez o codigo do javascript liah?
ResponderExcluirLiah perfeito o tutorial tah de parabens beijos Levi
ResponderExcluirwww.levigustavodicas.com
Adorei o tutorial! Esse efeito é muito lindo ^^
ResponderExcluirBeijos
www.garotadeallstar.com.br
Muito bom o tutorial :3
ResponderExcluir~Kisses
things-to-html.blogspot.com
O tooltip é uma graça flor! Eu já tinha visto tutos de tooltips, fica um detalhe muito fofo!
ResponderExcluirFico feliz que sua internet tenha voltado ao normal, que vai ter o layout free e um sorteio õ/
Quanto á gripe, melhoras viu? É ruim mesmo digitar-espirrar-digitar-espirrar kkkkk.
Beijos ♥
Caprichosdabiia.blogspot.com
Essa tooltip é uma fofura, uma graçinha, tava procurando por esse efeito >.<
ResponderExcluirNyah Kawaii
Amei o tuto mas não consegui fazer :(
ResponderExcluirTem um game lá no blog participa!
legal
ResponderExcluirEu adoro esse enfeite. Achi tão fofo... E dá um ar mais "suave" ao layout.
ResponderExcluirThing HTML
Mega dica, fica lindo mesmo!!
ResponderExcluirTem sorteio de uma peça Galaxy Print da Sheinside no meu blog! :)
xx
Tali
nuasecruasblog.wordpress.com
Fica super fofo usar tooltip u3u Eu vou escutar agora, parece ser bom o3o...
ResponderExcluirÉ viciante! ahsuashsah'
Beijos ~
garotas-cupcakes
Este comentário foi removido pelo autor.
ResponderExcluirTava curiosa pra saber como era ! muito lindo
Excluirthe-charming-place.blogspot.com
Uhuul já estou usando!! Sim, eu coloquei os créditos :3
ResponderExcluirThe Suspects
ficaaa lindooo o/
ResponderExcluirvou favoritar, pra usar no proximo layout o/
acervo-de-livros.blogspot.com
LEGAL, gostei do tuto ;3
ResponderExcluircr4zy-world.blogspot.com
Legal, acho que vou usar quando eu trocar de layout (que vai demorar um pouquinho). O ruim é que tem que colocar códigos para usar...
ResponderExcluirKissus Liah
modaetutorial.blogspot.com
Tinha um tempo sem vir aqui e adorei esse novo layout do Cherry Bomb e adorei o tutorial. Parabéns pelo blog! (:
ResponderExcluirhttp://h-ardcore-girl.blogspot.com/
Tutorial incrivel, eu estava precisando ! :)
ResponderExcluircupcake bright
Sorteio e layout free? taí umas palavras que soaram ótimas em meu ouvidos! KK'
ResponderExcluirEu sei como é ficar espirrando a cada 5 minutos digitando, estou gripada também... ._.
Esse tutorial é massa! eu queria muito saber como fazer esse lindo tooltip, obrigada mais uma vez linda ^.^ ~
Adolescente Nerd
Muito obrigada, eu amo seu blogger
ResponderExcluiradoreiii a novidade q tem no post.. adoreiii
ResponderExcluirbju
http://aieuvivantagem.blogspot.com.br/
Muito bom, pena que como mudou o HTML do blog eu não consigo mais mudar layout nem nada.
ResponderExcluirhttp://bytheway-foryou.blogspot.com.br/
Eu estava procurando esse efeito para o meu proximo layout. ESPERO SUA VISITA EM nateeladopc.blogspot.com
ResponderExcluirsó não funcionou nas minhas imagens ''/
ResponderExcluirMas tá óteeeemo *------------*
Valeeeu bjs
to-rosachiclete.blogspot.com
No meu blogo layout não aparece isso: ]]> :c
ResponderExcluirPode me ajudar?
http://sonhos-sabor-chocolate.blogspot.com.br/
Aah, finalmente consegui <3 estava procurando esse tutorial faz anos, rs <3
ExcluirEu estava procurando esse tutorial a mil séculos!!ajudou muito
ResponderExcluirMeu-mundo-alternativo
Amei o tuto ja estou usando
ResponderExcluirto seguindo
bjos
Não consigo colocar. não sei mecher nessas coisas. O tutorial foi otimo
ResponderExcluirKisses
http://kissstrawberryexplosive.blogspot.com.br/
Ame o tuto... Estou usando, vou seguir..
ResponderExcluirBeijinhos!!
http://meninasadolescentes-porstef.blogspot.com.br/
muito bom amo esse blog
ResponderExcluirhttp://seututorialmeututorial.blogspot.com.br/
Muitoo bommm...adoreiii!! Valew por compartilhar com a gente..
ResponderExcluirSó eu que não achei o " ]]< " ?
ResponderExcluirNão consegui :C
ResponderExcluirNo penúltimo código, no LINK DE DESCRIÇÃO, tem que colocar o que???
ResponderExcluirTem que escrever o texto que vc quer que apareça quando o mouse passar por cima :)!
Excluiri--love---cupcakes.blogspot.com.br/
ameiiii visita --> Texto linkado
ResponderExcluirAdorei visite o meu blog clicando aqui
ResponderExcluirAmei perfeito!
ResponderExcluir<3
COMO FAZ PRA ELE APAREÇER ALTUMaTICAMENTE SEM PRESCISAR COLOCAR AKELE ULTIMOS CODIGO DENTRO DO EDITAR HTML DA POSTAGEN ? , eu vejo varios templates q ja vem com tooltips,
ResponderExcluirAmei,Perfect *-*
ResponderExcluirAdorei! Estava precisandodisso *u* Visita?
ResponderExcluirhttp://toolovepandas.blogspot.com.br/
Mt bom!
ResponderExcluirVisite e se puder siga: little-things-foryou.blogspot.com.br
Adorei ótimo tutorial como sempre *-*
ResponderExcluirhttp://mysweeet-world.blogspot.com.br/
Consegui ! Beijocas ! :)
ResponderExcluirhttp://mica-tutoriais.blogspot.com.br
Não consegui fazer a parte de aparecer : ( ,vou continuar tentando!!!!
ResponderExcluir