14/03/2013

GOODIES-modelos para tooltip

 Boa tarde!
Vim postar como editar a tooltip do blog,pra quem não sabe,é aquele trocinho que aparece quando você passa o mouse em cima do gadget quem somos,que mostra o nome,por exemplo,passando o mouse em cima da primeira imagem do quem somos vai aparecer Gabriel,é essa caixinha que aparece o nome que se chama tooltip,e nesse post eu vou ensinar a editar.
ANSIOSOS? Já sabem onde clicar....

*só pra constar,achei esse tuto no blog CHOCOLATE COM MORANGO*



1° Blue skylander

Cole acima de /body:
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background:#fff url(http://media.tumblr.com/tumblr_lohot5dqXx1qda978.gif)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#7ea5b6;box-shadow:0 1px 3px #ccc;border-radius:0px;text-transform: uppercase;}
</style>
Tradução

Em background: #fff é o fundo
O url em itálico é o url do mini-gif
color:#7ea5b6 é a cor da fonte
box-shadow:0 1px 3px #ccc é a sombra da caixinha
border-radius:0 é sem arredondamento,se você quiser arredondar aumente o número

2° Lilac Dreamer:
(o mini-gif fica mudando)

Cole acima de /body:
<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background:#BAB0C3 url(http://i12.photobucket.com/albums/a213/superkate_2468/favicon-3ico-1.gif)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#8D669B;box-shadow:0 1px 3px#ccc;border-radius:0px;text-transform: uppercase;}
</style>

3°Red apple:

Cole acima de /body

<script src='http://gizaa.googlecode.com/files/qTip.js' type='text/javascript'/>
<style>div#qTip{font:normal 8px &#39;pf ronda seven&#39;;margin:6px 0;padding:3px 19px;display:none;background: #802828 url(http://1.bp.blogspot.com/-ywrLooV_t00/T42QT41rm0I/AAAAAAAAAcU/qDsEmfzx-gk/s1600/favicon.ico)no-repeat 1%;text-align:left;position:absolute;z-index:1000;color:#FF6B6B;box-shadow:0 1px 3px #5B2929;border-radius:0px;text-transform: uppercase;}
</style>

Espero que gostem!Beijocas!



#vou por um desses aqui no blog#

8 comentários:

  1. Poxa pena que eu já tinha pego no KW mas concerteza uso em outro lay que eu fizer divulga meu blog?se não quizer td bem!

    ResponderExcluir
    Respostas
    1. DIVULGO SEU BLOG SIM!
      na minha próxima divulgação!

      Excluir
  2. Olá querida, já estou seguindo seu blog, que é muito charmoso viu?


    Convido você e suas leitoras a conhecer o meu:

    http://toobege.blogspot.com.br/


    Beijinhos e tenha uma ótima semana!

    ResponderExcluir
  3. Lindos *----*
    O 3º é perfeito u3u

    Kissus
    Mar de Glitter

    ResponderExcluir