♡ Tooltip personalizada no blog ♡
Hoy Meninaas!Tudo Bom?
Vocês sabem o que é Tooltip?
Vocês sabem o que é Tooltip?
Não? Eu explico:
Tooltip é uma mensagem que aparece
quando passa o mouse em algum link.
Para fazer é fácil.
Vá em modelo, editar Html.
Aperte Ctrl+F e procure por </head>E acima cole:
quando passa o mouse em algum link.
Para fazer é fácil.
Vá em modelo, editar Html.
Aperte Ctrl+F e procure por </head>E acima cole:
<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 chegou a parte da personalização.
Procure por ]]></b:skin> E Acima disso você vai ter que colar o código
que se encontra abaixo do modelo escolhido.
que se encontra abaixo do modelo escolhido.
Modelo 1
div#qTip {
padding: 3px;
display: none;
background: transparent url(http://ladyann.bravehost.com/Tutorials2/webset18/bg2.gif); /*Link da Imagem*/
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 10px;
}
padding: 3px;
display: none;
background: transparent url(http://ladyann.bravehost.com/Tutorials2/webset18/bg2.gif); /*Link da Imagem*/
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 10px;
}
Modelo 2
div#qTip { padding: 3px; background: #fff; /*Fundo*/
color: #ff7fb2; /*Cor do Texto*/
position: absolute; z-index: 1000; border: 1px solid #ff7fb2; /*Cor da Borda*/
display: none; font: bold arial; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
color: #ff7fb2; /*Cor do Texto*/
position: absolute; z-index: 1000; border: 1px solid #ff7fb2; /*Cor da Borda*/
display: none; font: bold arial; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
Modelo 3
div#qTip {
padding: 3px;
display: none;
background: transparent url(http://sl.glitter-graphics.net/pub/207/207297cqxmt9p9mm.gif); /*Link da Imagem*/
color: #FFFFFF; /* Cor do texto */
font-family: Century Gothic; /* Fonte */
font-size: 11px;
text-align: left; /* Alinhamento do texto */
position: absolute;
z-index: 1000;
border-radius: 10px;
}
Bye Bye
0 Comentários