Oi pessoal, como estão? Agora é pra valer, minhas aulas voltaram! Confesso que estou morto e por isso ainda não retribui os comentários, nem mesmo no Blog. Não pensei que seria uma correria tão grande assim no começo :S
Como eu disse que tentaria manter o ritmo de postagens alternadas, cá estou eu para trazer mais umas para vocês. Eu estava preparando esse tutorial há algum tempinho e acabei agora pouco! Trouxe 5 tipos de Tooltips personalizados para vocês. pra quem não sabe o que é, no decorrer do Tutorial eu vou mostrar.
Bom, para que o Tutorial funcione, você precisa antes adicionar os códigos no CSS. Primeiro, no Painel do Blogger, clique no nome do seu Blog - Modelo - Editar HTML - Pesquise por: </head>
Antes dessa tag, cole o código abaixo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>Colou? Agora é a hora da "Personalização".
Tooltip 1
Esse é o primeiro Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {padding: 3px;
border: 2px solid #A2CD5A;
display: none;
background: transparent url(http://media.tumblr.com/tumblr_mej6isPoDA1r16se4.png);
color: #696969; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
}
Tooltip 2
Esse é o nosso segundo modelo de Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {padding: 3px;
border: 1px double #f5f5f5;
display: none;
background: #FA8072;
color: #ffffff; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;z-index: 1000;
border-radius: 10px 10px 0px 10px;
box-shadow: inset 0 0 8px #f5f5f5;
}
Tooltip 3
Esse é o terceiro modelo de Tooltip, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {padding: 3px;
display: none;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUo6TcIcrbswFVpR7qEu2pGDi3vbsFTmvzxKOBnF0ao3xbwL_7FlBrgUvxgNTbooGOgpckHbIBcSSVdVkYqYPL61UYwXaEFSB0fQMihGS8WNN2uIkuegYVx-Br4sEYNududYFqBYXHCG4/s320/2r7pqqa.jpg);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 10px;
}
Tooltip 4
Bom, esse é o modelo de Tooltip número quatro, para aplicá-lo no seu Blog siga os passos:
Ainda no Painel de CSS do Blog, pesquise por: ]]></b:skin> Acima dessa tag, cole o código que segue:
div#qTip {padding: 3px;
display: none;
border: 1px solid #1874CD;
background: url(http://24.media.tumblr.com/tumblr_m8li27B93N1r44mhto1_500.png);
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 2px;
}
Tooltip 5
Esse é o quinto e último modelo de Tooltip que eu trago hoje para vocês, para aplicá-lo no seu Blog siga os passos:div#qTip {Bom, acho que é isso! Espero que tenham gostado dessas personalizações de Tooltip *-* Deu um trabalhinho pra fazer! Tentarei responder os comentários agora, certo? Beijos :*
margin:2px;
padding: 5px 5px 5px 25px;
display: none;
color:#78a7c8;
background: #fdfdfd;
border: 1px solid #F5F5F5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font: Century Gothic;
font-size: 10px;
background:#fff url(http://media.tumblr.com/tumblr_lx9va28WQZ1qmyqtl.png)
no-repeat;
text-align: left;
position: absolute;
z-index: 1000;
}
Eu amei o terceiro com aquelas luzes! :3
ResponderExcluirMas acho que vou colocar o segundo no próximo lay! ^^
Bjo, Sel ;*
Jovens Gordinhas
Unicórnio com Bigode
Nerd Descolada
HAHA, Tente fazer coisas bem variadas sabe?
ExcluirAh, usa sim :)
Que Divos amei ;)
ResponderExcluir@Cakes Braves
É!
ExcluirQue fofinhos ! Obviamente eu vou usar, raramente a tooltip pega aqui ASHUASHUASHUA'
ResponderExcluirBeijos :3
Sweet Girl
KKK Uma pena né? Usa sim *-*
ExcluirInfelizmente temos outras coisas pra fazer a não ser o nosso blog, e isso atrapalha muito, mimimi. Escola/Faculdade/Trabalho são as coisas que mais atrapalham por exemplo, mas é pra vida inteira (a não ser a nossa triste velhice .-.)!
ResponderExcluirEnfim, adorei as tooltips, espero que façam sucesso já que deu um 'trabalhinho' pra fazer! Talvez eu uso no próximo layout (;
É verdade Lê, você falou tudo agora! :S
ExcluirKKKK, É, elas deram um trabalhinho mesmo! Obrigado *O*
gostei disso. E é facilzinho! muito bom
ResponderExcluirBeijinhos enferrujados
DAMA DE FERRO
É super fácil de aplicar mesmo :)
ExcluirDeve ter dado um trabalhão preparar esse tutorial massa, e ainda bem organizado e explicado. Parabéns !
ResponderExcluirNATEELADOPC.(blogspot.com)
É, confesso que deu sim! Obrigado >.<
ExcluirAdorei o tutorial, é difícil achar bons modelos para tooltips ;-;
ResponderExcluirTo começando com o meu segundo blog agora, visita lá ^~^
bjs
http://heartofdeidara.blogspot.com/
HAHA, Que bom que gostou!
ExcluirAh, vou visitar sim :)
Muito bacana,vou usar o ultimo efeito...
ResponderExcluirCara quando meu blog abir vamos fazer afiliação????? Responde na minha ask :http://ask.fm/kawaiitutosmf Abraço ....
Feliz por ter gostado! ^^
ExcluirQuando seu Blog abrir eu o avalio :P
Um mais lindo que o outro Alex, arrasou!
ResponderExcluirVocê tem uma criatividade que eu acho tão perfeita suahsuah' sem contar que para mim tooltip é uma das partes mais importantes do lay *---*
Raawn :33 | viciadasemcupcake.blogspot.com
Ain Gih, tu é muito fofa visse? Da vontade de arrochar! -q KKKKK
ExcluirObrigado <3
eu adorei Alex. Vou ver se consigo usar alguma (te creditando, claro) ^^ adoro seus tutorias, por que eles são bem fáceis de fazer (ainda mais pra uma pessoa como eu que não sabe nem pra onde vai!).
ResponderExcluirSuper beijo pra você ^^
http://comalcooolico.blogspot.com.br/
Ah, que bom que você gosta deles... Tento deixá-los o mais claro possível! :)
Excluirque lindos os tooltips amei :3 fica bem fofinho quando se coloca-os
ResponderExcluirIrresistible Touch (~perfil~)
Uhun, ficam lindos *-*
ExcluirAdorei a dica.
ResponderExcluirSuper útil!
Abraços!
senhordoseculo.com
Beleza para Homens
É!
ExcluirQue bacana, gostei do tutorial. Parabéns! =)
ResponderExcluirNOSSO CAPRICHO
apsmass.blogspot.com
Valeu! :P
ExcluirAdorei :3
ResponderExcluirpequeena-princesa.blogspot.com.br/
Ótimo tutorial,Alex.Os modelos ficaram lindos ♥
ResponderExcluirAté mais :33
blog-bluesky.blogspot.com
Ah, que bom que gostou Azula *-*
ExcluirQue lindos! Adorei, bem diferentes!
ResponderExcluir@Escrita de Cabeceira
HAHA, Obrigado!
ExcluirAdrei os tooltips, ficaram lindos! O meu preferido foi o segundo. Espero que todos façam bom uso. Beijos.
ResponderExcluirthe-zombie-attack.blogspot.com
Obrigado Luly sua linda! :)
ExcluirAdorei as tooltips, são bem úteis deixam o blog ainda mais lindo *u* os modelos ficaram bem legais
ResponderExcluirhtml-detected.blogspot.com.br
É, Obrigado Kaylor *O*
ExcluirAdogo *-* Ficaram bem fofos e os modelos ficaram uma graça, mas simpatizei com o primeiro.
ResponderExcluir- Dão um ar bem legal ao blog.
TSD
Eu também achei o primeiro fofinho *-*
ExcluirBj :*
Tava procurando esse tutorial um tempinho, ele vai me ajudar muito. Vou usar ele no blog :3
ResponderExcluirgarotadifferente.blogspot.com
Sério Thay, que bom que consegui ajudar :)
Excluiraaaaaaaaaaaa finalmente um que realmente funcionou!
ResponderExcluirestou muito grata a você!
se eu puder ajudar em alguma coisa é só pedir =)
minhas-confissoes-2012.blogspot.com
n comsigo achar o ]]> me ajuda
ResponderExcluir