11/03/14

Maratona de tutoriais: Personalizar o tooltip


Olá! Tudo bem? Uma das "prendas" do aniversário do blog vai ser esta maratona de tutoriais. Ainda não sei quantos posts vou fazer, mas deve andar à volta dos 4/5. Este é o primeiro, que é sobre como personalizar o tooltip.

Para quem não sabe, o tooltip é aquela caixinha onde diz "Vaga".

Para personalizar basta ir ao Html >> Ctrl+F >> Pesquisa por </head>
Acima dessa tag mete: 

<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'/>

Agora procura por: ]]></b:skin>
E acima  da tag mete:

div#qTip {
padding: 3px;
background: #eee5de; /* Cor de Fundo*/
color: #8b8378; /* Cor da Fonte */
position: absolute;
z-index: 1000;
border: 1px solid #8b8378; /* Cor da Borda */
display: none;
font: bold arial;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

E agora é só editares como quiseres! Muito fácil :)

Espero que tenham gostado, beijinhos!

3 comentários:

  1. Amei o tuto, o tooltip ficou lindo!

    chuvasdioutono.blogspot.com

    ResponderEliminar
  2. Adorei a ilustração ehueheuhe
    o Tutorial também :3

    http://euamotutoriais.blogspot.com.br/

    ResponderEliminar
  3. O tooltip fica super fofo nos blogs de htlm e css porém também fica bonito nos blogues normais :)

    la camomille

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias