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 {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^^
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;
}
Recuerda dejar tu comentario~
Les dejo besos de cherryT.O.P
Att:Lee rae mi{dayi}
Gracias por el tutorial!~ Muy interesante..
ResponderEliminarLuego 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/
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
ResponderEliminarEsta bastante padre este tuto, gracias :)
ResponderEliminarYo tambien odio que me dejen asi con las sorpresas XD
Saludos!! y Feliz casi cumpleaños XDD
muy chulos gracias
ResponderEliminarMuchas gracias por todo :D
ResponderEliminarBuen tuto Dayi *^* y happy bday tu yu!!! yu! yu! *3*
ResponderEliminar