Exemplo de tooltip personalizado |
Vocês lotaram meu e-mail com essa pergunta e hoje eu vim aqui responder! Não tem nenhum segredo e se você seguir o passo a passo certinho, vai ter um tooltip personalizado bem legal. Eu ainda fiz mais 4 modelos pra você adicionar no seu blog.
1) Vá em Editar HTML, dê Ctrl + F e digite </head>. Antes disso, coloque o seguinte 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'/>2) Escolha o modelo que você deseja:
Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */div#qTip {padding-top: -2px;padding-bottom: -2px;padding-left: 25px;padding-right: 5px; /*Espaço entre a borda e o texto*/display: none; /*Não mexa*/background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxv4rDJgFQyQvD1Szx9zfGL34h6HwNB-1XV6yIUJKdNv9caZOfM3mxbWtB8mJVe03RbH4KLkBX-jn-P8z7Hzc2CsybeSmWzU5r3P9RvaSnStf1xsa2vt7yPzzuyWvzvhC852TiUm-X7snn/s1600/Carolice.png)no-repeat; /*Não mexa*/text-align: left; /*Não mexa*/color: #79603e; /*Cor da fonte*/font-family: Georgia; /*Tipo de fonte*/font-size: 13px; /*Tamanho da fonte*/font-style: italic; /*Fonte em itálico*/position: absolute; /*Não mexa*/z-index: 1000; /*Não mexa*/border-radius: 0px; /*Borda arredondada*/border: 1px solid #F5F5F5;}
Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */div#qTip {padding-top: -2px;padding-bottom: -2px;padding-left: 5px;padding-right: 5px; /*Espaço entre a borda e o texto*/display: none; /*Não mexa*/background: #f0b859; /* Cor de fundo */color: #fff; /*Cor da fonte*/text-shadow: 0px 1px 0px #e1a746;font-family: Georgia; /*Tipo de fonte*/font-size: 13px; /*Tamanho da fonte*/font-style: italic;position: absolute; /*Não mexa*/z-index: 1000; /*Não mexa*/border-radius: 5px;box-shadow: inset 0 0 8px #eb8e42;border: 1px solid #F5F5F5;}
Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */div#qTip {padding-top: -2px;padding-bottom: -2px;padding-left: 5px;padding-right: 5px; /*Espaço entre a borda e o texto*/display: none; /*Não mexa*/background: #c7d695; /* Cor de fundo */color: #fff; /*Cor da fonte*/text-shadow: 0px 1px 0px #a7b774;font-family: Georgia; /*Tipo de fonte*/font-size: 13px; /*Tamanho da fonte*/font-style: italic;position: absolute; /*Não mexa*/z-index: 1000; /*Não mexa*/border-radius: 0px;border: 2px dotted #F5F5F5;}
Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */div#qTip {padding-left: 5px;padding-right: 5px; /*Espaço entre a borda e o texto*/display: none; /*Não mexa*/background: #fff; /* Cor de fundo */color: #9bb1be; /*Cor da fonte*/font-family: "silkscreen";font-size: 8px;position: absolute; /*Não mexa*/z-index: 1000; /*Não mexa*/border: 1px solid #F5F5F5;}
Comente com o Facebook:
Assinar:
Postar comentários (Atom)
Oi Carol, como vai?
ResponderExcluirLevei um susto quando tentei acessar o EDF e não entrou. Daí por um acaso vi seu comentário em um blog, achei a foto conhecida, e resolvi acessar. Ainda bem que o fiz!
Li seus posts sobre a mudança, e te entendendo profundamente. Também fiz algo parecido com o meu, e sei o que você sentiu ao fazê-lo. Gostei muito das mudanças, até porque o conteúdo novo que você propõe, é bem parecido com o que eu gosto de fazer <3
E eu não posso deixar de comentar: que coisa mais linda seu layout! Lindo e inspirador! Não posso deixar de perguntar: você faz layout sob encomenda? Amei!
Um abraço e boa sorte com essa nova fase, aposto que vai ser um sucesso!
http://www.winterbird.com.br/
Oi Jéss <3 Obrigada mesmo, flor.
ExcluirEu ainda não faço, mas tenho planos de abrir em fevereiro! Daí eu aviso, pode ser?
Beijos e sucesso também ♥
Pode sim Carol!
ExcluirNão se esqueça de me avisar, hihi <3
Carol o blog está uma fofura! Esse layout, os novos assuntos eu também estou tentando reformar o meu blog, mas o que me quebra é o layout. Tá lindo, parabéns!
ResponderExcluirObrigada, Bianca (=
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi Carol,
ResponderExcluirAdorei a mudança, o blog ficou lindo demais e mais sucesso na nova fase.
Amei o novo nome, também!
Adoro os tutoriais, são uma graça esses tooltips
beijos e que seu 2014 se encerre lindamente
Nana - Obsession Valley
Obrigada, Nana!!
ExcluirQue amorzinho que fica, amei a dica <3
ResponderExcluir♥
Beijos
Brilho de Aluguel
Que bom, flor *-*
ExcluirOiee Carol, tudo bom?
ResponderExcluirTinha comentado antes mas infelizmente travou aqui (rs), nossa que tutorial mais lindo ♥ Tem um tempinho já que estou a procura de Tooltip's pois sempre quando achava um freebie dele ficava dando erro #bolado hUAHAUAHUAH. Mas então, fiquei uma dúvida enorme em qual colocar no blog mas achei um com a carinha dele haha, obrigado pela postagem me ajudou bastanteeeeee!!
Beeeijos!
Lu || Um Grande Vício Literário
Eita haha De nada Luan, que bom que ajudou (=
ExcluirQue lindo!
ResponderExcluirEstava mesmo atrás de algum tuto fácil que ensinasse isso, hahah.
Beijinhos.
www.minineko.org
Oba! haha
ExcluirOi, Carol!
ResponderExcluirQue lindo que ficou o novo blog. Amei demais o nome, o layout e os novos conteúdos...
Muito sucesso nessa nova fase! Estarei aqui sempre acompanhando! <3
Beijos, Fer.
http://viciosemtres.blogspot.com.br/
Obrigada, Fer <3
ExcluirQue fofos :)
ResponderExcluirSão fáceis e lindos, amei!!
xoxo
Um Dia Qualquer
Ótima dica! www.jovenspreciosas.com
ResponderExcluirHey, Carol! Tooltip personalizado é uma graça e os seus modelos estão uma fofura, principalmente esse do coração! Estive ocupada esses dias com o novo layout do Bibli (que eu acho que do jeito que sou só irá ficar pronto na virada do ano rs) mas já coloquei tooltip personalizado lá também! Obrigada! Beijos :*
ResponderExcluirwww.bibliophiliarium.com