Olá! :3 Tudo bem com vocês? Desculpem se não respondi os últimos comentários, é que estou gripada, e convenhamos que digitar enquanto você espirra a cada cinco minutos não é muito legal. Tenho boas notícias, minha internet agora está normal e vou poder fazer um layout free e um sorteio mais pra frente! Mas talvez meu tempo diminua semana que vem, já que vou começar as aulas na auto-escola \o/ -Tô tão feliz, vou poder dirigir *u*
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.
Exemplo: Passe o mouse aqui
O nome disso é tooltip e não é difícil usá-lo. Vamos começar?
1. Na edição de HTML do seu blog, aperte Ctrl+F e procure por <head>
2. Copie o código abaixo e cole abaixo de <head>:
<script src='https://static.tumblr.com/z2dnemm/gSxqztfsw/jquery.style-my-tooltips.js'/>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:false,
tip_delay_time:200,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>
3. Aperte Ctrl+F novamente e procure pelo código abaixo:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>
3.1. Se você econtrar o código, não precisa fazer nada
3.2. Caso não encontre o código, copie ele e cole abaixo de <head> também
4. Agora procure por ]]></b:skin> e cole o código a seguir acima de ]]></b:skin>
#s-m-t-tooltip {
max-width: 300px;
z-index: 10;
margin: 24px 14px 7px 12px;
padding: 5px;
background: #d1d1d1; /*Cor do fundo*/
border: 1px solid #000; /*Estilo da borda*/
border-radius: 3px; /*Borda arredondada*/
box-shadow: 1px 1px 3px #000; /*Sombra da caixinha*/
font-family: $(body.font), sans-serif; /*Fonte do texto*/
font-size: 11px; /*Tamanho do texto*/
line-height: 16px; /*Altura da linha, aumente se aumentar a fonte*/
color: #000; /*Cor do texto*/
}
5. Altere o código nos lugares indicados para personalizar seu tooltip e salve!
Atenção: Não dá pra ver as alterações na prévia do editor, então você terá que salvar e abrir o blog para ver como ficou!
6. 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>
Substitua com o seu link e o texto. 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, usando a estrutura abaixo:
<a href="link" title="Descrição da imagem"><img src="link-da-imagem/></a>
Espero que tenham conseguido seguir o tutorial! O código original é do site Malihu, então se por acaso o código que eu disponibilizei parar de funcionar, vocês podem baixar os arquivos e seguir as instruções que estão no site original. Quero deixar créditos também para o tumblr Etro Themes, pois foi por lá que descobri o site original.
Qualquer dúvida, podem perguntar nos comentários!
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