Image Map

20.11.12

Personalizando a Tooltip do blog

A primeira ilustração pra post que faço u.u


Hello people's (Olá pessoas) ! Estou fazendo curso de inglês e tô animada com isso rs. Descupem pelo tempo que fiquei sem postar, a semana tá corrida, vou fazer prova e tenho que tirar boas notas. Ah! Estou fazendo o novo layout do blog :) Espero que gostem.
Hoje venho trazer um tutorial de Tooltip personalizada, para os que não sabem o que é tooltip, é aquela mensagem que aparece ao passar o mause sabe? então, vamos aprender a personaliza-la!!! Aprendi o tutorial no blog Kawaii World. Go???

1. Procure por </head> e cole acima dele o código a seguir:
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>



2. Agora procure por ]]</b:skin>  e logo acima cole o código da tooltip que lhe agradar mais!

div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#FF69B4;
background: #fdfdfd;
font-family: handy;
font-size: 8px;
background:#fff url(http://i11.photobucket.com/albums/a168/evelynregly/mini_gifs/mini_gifs80.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}


div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#FF69B4;
background: #B0E0E6;
font-family: handy;
font-size: 8px;
background:#B0E0E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4V0oJkOomJe9RD0n4ahxBNpEcAz9o8YSIV_Z1ziFrrPM7bJikBkuV6EA-9YL26aMfS6zM9ErxFnhl78MSyWHxKMWHKXExSphX36ygKA52b0b4QWKvfMqmAPZud7DvzHmdYUe9w2V4U8/s1600/giftrechy3.png)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

div#qTip {
margin:3px;
padding: 8px 22px;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
color:#000000;
background: #F5F5F5;
font-family: handy;
font-size: 8px;
background:#F5F5F5 url(http://static.tumblr.com/rltvkjt/Dnzlmr3zf/pandabear.gif)
no-repeat 5%;
text-align: left;
position: absolute;
z-index: 1000;
box-shadow: inset 0 0 4px #eee, 0 0 4px #ccc;
 text-transform: uppercase;
}
 @font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

Você pode mudar a parte destacada em negrito, pela URL do mini gif que lhe agradar mais!
Beijokas!!

2 comentários:

  1. Muito legais, eu amo o seu blog :D
    sereifelizz.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Onw! Obrigada, bom saber que tenho leitores assim :) bjs

      Excluir