[TUTORIALES] 3 Modelos para tu tooltip.

Hello mis pollitos copitos de nieve~!!Como han estado? yo pues muy normal y nerviosa...por que ya le dije a mi mama lo que queria para navidad,ella me dijo que esperara...que quisas es sorpresa...y odio eso...por que me deja con muchas ansias de saber que es....jajaj como toda una niña pequeña.Ademas el 22 de diciembre es mi cumpleaños...jaja cumplo 17~!!Espero publicar ese dia,algo especial...ok,no tengo mucho que decir...ohohoh si,gracias a todos por sus buenos comentarios,ya me mejore del dolor de espalda.ok,Hoy les traigo la tutorial de como poner tooltip a tu blog,y 3 modelos.~!!!Aqui vamos:

| vista previa |

*Un tooltip es una ventanita que sale en la opcion,como nombres,titulos,enlaces etc.*
1.Primero vamos a plantilla | Editar HTML | Y buscar <head> 
2.Arriba de <head> pega el siguiente codigo:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" src="//yourjavascript.com/1411249631/qTip.js" type="text/JavaScript"></script>
3.Ahora les dejare varios modelos.
MODELO#1:
Arriba de  ]]></b:skin>  pega los siguientes codigos:

div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #f9cfe1;
background: -moz-linear-gradient(top,  #f9cfe1 0%, #efacc8 85%, #f4bcd3 87%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9cfe1), color-stop(85%,#efacc8), color-stop(87%,#f4bcd3));
background: -webkit-linear-gradient(top,  #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -o-linear-gradient(top,  #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: -ms-linear-gradient(top,  #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
background: linear-gradient(to bottom,  #f9cfe1 0%,#efacc8 85%,#f4bcd3 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9cfe1', endColorstr='#f4bcd3',GradientType=0 );
box-shadow: inset 1px 1px 0 #ffe4ef;
border: 1px solid #dfa1bb;
padding: 6px;
font-family: "arial";
font-size: 10px;
color: #fff;
text-shadow: 1px 1px 0 #d689a9;
}
MODELO#2:
 
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #cecfd3;
box-shadow: inset 0 0 4px #babdca;
padding: 6px;
font-family: "silkscreen";
font-size: 8px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 0 #a8acbf;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 10px;
text-transform: uppercase;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}
MODELO#3:
 
div#qTip {
position: absolute;
z-index: 1700;
display: none;
margin-top: 6px;
background: #d0dbe4;
background: -moz-linear-gradient(top, #d0dbe4 0%, #e1e7ed 51%, #d0dbe4 51%, #d0dbe4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(51%,#e1e7ed), color-stop(51%,#d0dbe4), color-stop(100%,#d0dbe4));
background: -webkit-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -o-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: -ms-linear-gradient(top, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
background: linear-gradient(to bottom, #d0dbe4 0%,#e1e7ed 51%,#d0dbe4 51%,#d0dbe4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#d0dbe4',GradientType=0 );
box-shadow: inset 1px 1px 0 #eaf0f4;
border: 1px solid #bdccd8;
padding: 4px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 0 #bdccd8;
}
Espero que os guste a todos~!Ademas los premios que me ha nominado...los contestare en la entrada que hare el 22~!!ok?Pues creo que he pasado por todos los blogs,mas o menos jajajaj^^
Recuerda dejar tu comentario~
Les dejo besos de cherryT.O.P
Att:Lee rae mi{dayi}

9 comentarios:

  1. Gracias por el tuto! ^^
    Aunque no acaba de quedarme claro que es un tooltip... :S

    ResponderEliminar
  2. Gracias por el tutorial!~ Muy interesante..
    Luego lo pondre en mi blog porque ahora tengo unos destellos de corazones multicolores...
    Soy nueva en tu blog, el cual esta muy lindo..
    Me sume a tus seguidores ya.. y me gustaria invitarte a que me apoyes igual porfis! De antemano mil gracias por tu apoyo!
    aqui la url de mi bloggi. :)
    http://comparteconbriiz.blogspot.com/

    ResponderEliminar
  3. Yo lo que no entiendo es como haces para que toque un link se vea, no como ponerlo en la plantilla sino para cada link ejemplo en tus amigas

    ResponderEliminar
  4. Esta bastante padre este tuto, gracias :)
    Yo tambien odio que me dejen asi con las sorpresas XD
    Saludos!! y Feliz casi cumpleaños XDD

    ResponderEliminar
  5. Ohayo!!

    me parecen geniales!! arigato! por tantos recursos y tutos *w*

    ResponderEliminar
  6. Hacia mucho que no pasaba por aqui!! el diseño nuevo del blog me encanta! y gracias por el tutorial!! :D
    Saludoss! :)

    ResponderEliminar
  7. Buen tuto Dayi *^* y happy bday tu yu!!! yu! yu! *3*

    ResponderEliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com