Dois modelos para Tooltip (01)


Olá meus gatinhos (*~∇~*)ノ. Tudo bem com vocês? espero que sim. Eu estou ótima. Vocês acreditam o quanto de tralhas eu tenho no meu guarda-roupa? Eu achei tanta bugiganga que até eu fiquei surpresa ~rs. Tudo bem que eu tenho mania de guardar as coisas, mas não sabia que o meu quarto havia virado literalmente um museu! E não, eu não estou exagerando, é tanta coisa que eu mal conseguia usar o guarda-roupa para o que ele realmente servia. Eu nunca pensei que chegaria a tanto, sério.  (⌒0⌒)/

Enfim, hoje eu me arrisquei a fazer alguns tooltips para blog e por incrível que pareça eu não me sai tão mal assim ~rs. Todo mundo sabe que eu adoro fazer esses tipos de utilitários, então isso não é uma novidade. Eles ficaram bem fofinhos, e ideais para layouts mais trabalhados e mi mi mi. Estou pensando em fazer no próximo post dois modelos para comentários, isso é, se eu conseguir um tempinho extra a mais das tarefas da escola e de casa. ( ~le eu pelejando para terminar essa benedita linha~blá blá blá ~)

Primeiro procure por  </head> e abaixo dele 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'/>
Depois é só procurar por ]]></b:skin> e colar acima o código do tooltip de sua escolha.

*- Primeiro tooltip
div#qTip {
padding: 3px;
text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
border: 1px solid #f9d6ca;
background: #ffe3d9;
box-shadow: inset 0 12px 0 rgba(255,255,255,0.2), inset 1px 1px 0 rgba(255,255,255,0.8);
border-left: 3px solid #f9d6ca;
border-right: 3px solid #f9d6ca;
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
color: #f7caba;
}
*-Segundo tooltip 

div#qTip {
padding: 3px;
background: #f5f5f5;
border: 1px solid #ebebeb;
border-top: 2px solid #ebebeb;
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
color: #d8dbda;
}
Até mais queridos. Fiquem com Deus... ♥

Nenhum comentário:

Postar um comentário