15/07/2014

[Tutorial] - Modelos para Tooltip.

Postagem Agendada
Yoo cristaizinhos *-*
Neste momento, agora talvez estarei ainda na viagem =u=, no sei o3o, ou talvez já tenha chegado ^^
Bem, como tinha na Agenda eu tinha lá que tinha que fazer tutorial de uns tooltips :3 e venho aqui com uns 2 modelos, bastante fofos ^^

Bem, vamos como de costume em Modelo>HTML e fazemos CTRL+F e procuramos por <head> e colamos em baixo o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'></script>
Não mexem em nada!
Agora procuramos por  ]]></b:skin> e colamos em cima os seguinte códigos \o/
Modelo 1
 @font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #ccc6e8;
display: none;
color:#fff;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #dcd8ef;
border: solid 1px #ccc6e8;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}
Modelo 2
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
div#qTip {
margin:2px;
padding: 5px 9px;
border-right-width: 1px;
border-bottom-width: 1px;
text-shadow: 1px 1px 0px #f7cedd;
display: none;
color:#FFF;
text-align: left;
position: absolute;
z-index: 1000;
text-transform: uppercase;
background: #fce3ec;
border: solid 1px #f7cedd;
font-family: silkscreen;
font-size: 8px;
no-repeat 5%;
}  
Só mexem no que está a negrito! Só se souberem mexer em HTML xD, mas recomendo só mexerem no que está mesmo a negrito.
Créditos
Espero que vos tenha dado jeito o tutorial :3
Kissus da vossa neko nyan~

6 comentários:

  1. Adorei o tutorial, Sakura-chan!
    Eu adorei o modelo de cor rosa com letras brancas.
    Muito kawaii!

    Kissus~

    ResponderExcluir
    Respostas
    1. Ainda bem que gostaste ^^
      Hai, é bastante fofo *u*

      Kissus >w<

      Excluir
  2. Olá Sakura-chan! Conheci seu blog hoje, que layout fofo <3
    Gostei dos modelos de tooltip.
    Bjs http://wh-graymoon.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yoo :3
      Ârigato *-----*
      Ainda bem que gostaste \o\

      Kissus >w<

      Excluir
  3. Tão fofinhos! *-*
    Gostei o3o
    Onee só mexeu nas cores -q

    Kissus *3*

    ResponderExcluir
    Respostas
    1. Hai *u*
      Ainda bem \o\
      Por acaso não XD

      Kissus >w<

      Excluir

Yoooo \o/
Vais comentar? Oh espero que sim *-*
Mas precisas de seguir só algumas regras, para o teu comentário não ser excluído
Podes divulgar o teu blog, por exemplo para eu seguir ou isso, mas tenta entrar um pouco no assunto do post ^^
Podes criticar o blog , mas de uma forma educada , assim poderei melhorar com as tuas criticas :3
Se precisares que eu poste algum Tutorial, Goodies, lays... Coisas assim, podes pedir à vontade \o
Podem enviar-me tag's, mas não prometo faze-las porque sei lá, não me dou bem com questionários nem essas cenas -u-'

Quando fores comentar não fales coisas inapropriadas que não entrem no assunto do post.
Não podes pedir parceria nos post's de Dia-Dia e isso, apenas na página de Parceria que fica aqui
Kissus da Saku saku nyan :3