Tooltip Transparente

 
Hi :3
Então, repararam no novo layout? Eu preferi manter a mesma paleta de cores porque, particularmente, amo azul e acho linda essa paleta *U* Mas.. O que vocês acharam do layout amores? Espero que tenham gostado *--*
Mas enfim, trouxe um tutorial super fofo da tooltip que eu uso aqui no blog!
A preview da tooltip é essa:

Tutorial:

Vá até o HTML do seu blog e procure por </head> (clique dentro da caixa HTML e aperte F3 para facilitar sua busca)
Abaixo da tag destacada, cole o seguinte código:
<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 procure por ]]></b:skin> e quando achar cole o seguinte código acima da tag pesquisada:

div#qTip {
  padding: 6px;
  display: none;
  background-color: rgba(0,0,0,0.5);
  color: #FFFFFF; /* Cor do texto */
  font-family: Century Gothic; /* Fonte */
  font-size: 8px;
  text-align: left; /* Alinhamento do texto */
  position: absolute;
  z-index: 1000;
}

Obs.: Faça as alterações de acordo com o que está entre /* */; Edite somente o que está em negrito, se não o código não funcionará.

8 comentários:

  1. Adorei esse efeito de Tooltip, é bem diferente dos usados nos blogs atuais, vou usar ele logo maais ;33'

    Ice Cream

    ResponderExcluir
  2. Perfeito esse tutorial, simplesmente lindo esse tooltip, já está salvo nos favoritos, e esse layout do blog está divônico!

    Adolescente Nerd

    ResponderExcluir
  3. Adoro esta tooltip :3
    Seguindo aqui, beijos!

    crazyforhtml.blogspot.com

    ResponderExcluir
  4. Heeeeeeeey ~ Adorei o tutorial , na verdade adorei teu blog , super lindo e fofo , claro que estou seguindo essa fofura , pode ser simples mas amo blogs com layouts simples *u* ~ e também amei seus avatares da Miley (Acho que escrevi certo .. ou não SHAHAHSAH)

    Bjooooooooooooos s2

    Visita ?
    Novo blog

    ResponderExcluir
  5. Eu já uso um, mais esse dai é bem lindo :3 Gostei do post, e ainda mais do blog. Seguindo aqui T^T

    Kissus
    Perfect Things

    ResponderExcluir
  6. Nossa, eu achei que era só mudar a cor do fundo, tipo assim: background: transparent; Mas me enganei, AUEAUH' ~3 Adorei o tutorial, em vista dos outros, bem mais simples, gostei TuT E quanto ao layout, não tinha visto o antigo, mas sei que era tão divo quanto esse, *u* Adorei, lindo demais, estou seguindo, e.e

    ~ Kisses

    - 4 Seconds.

    ResponderExcluir
  7. Poxa, adorei o tooltip, bem diferente! Favoritei o post pra eu usar no próximo lay >_<
    Magic Road (O Garota do Olhar Sincero mudou de URL ^-^)

    ResponderExcluir