Tutorial: Tooltip 1 ♥+Vota por mi ♥


Era Rodolfo  un reno que tenia la nariz,roja como la grana la la   
Hola chicas ,Bueno se abran dado cuenta que ya puse a las 8 primeras que comentaron en la anterior entrada ,pero me sobro dos espacios y los rellenare con los que siguieron comentando en esa entrada también me falta poner efecto a las imágenes  jeje



¿Que es tooltip?
 Un tooltip ,conocido como globos de ayuda ,al pasar el cursor sobre una imagen o link aparece mayormente un rectángulo o una cajita y aparece alguna descripción que le pueden poner ustedes
Ejemplo:


Donde dice Oso durmiente  aparece una cajita apenas pase el cursor sobre la primera imagen ,a esa cajita se le llama Tooltip.
El que les are un tutorial es de este modelo el que tengo ,el que vieron en la imagen 

Para obtenerlo primero vamos a Plantilla/Edicion HTML
Presionan Ctrl+F colocan en el buscador : 
</head>
y colocan el siguiente codigo antes de </head>
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src="https://googledrive.com/host/0B5KbDl35bjicR1J5LV9EOXJOSkE"></script>
<style>
div#qTip {
margin:10px;
padding:3px 5px 3px 29px;
z-index: 1000;
background: #e6decf;/*Fondo de Tooltip*/
text-shadow: 1px 1px 0 #ebd2bc;/*Sombra del Texto*/
border: 2px dotted #FFF;/*Tamaño del borde,Forma de Borde,Color del borde*/
color: #b8997e;/*Color de la Letra*/
letter-spacing: 1px;
font-size: 12px;/*Tamaño de la letra*/
text-align: left;
position: absolute;
z-index: 1000;
background:#e6decf  url(Url del la imagen que acompaña al texto)no-repeat 5%;
}
</style>
Pagina para eligir colores :http://html-color-codes.info/
Bueno le pueden añadir lo que gusten ,si quieren que tenga unos bordes en las esquinas redondeadas solo tienen que agregar despues de div#qTip {
border-radius:3px;/*Tamaño de borde aredondeado*/
Bueno para poner la descripcion que quieras que salga solo tienen que aser lo siguiente:
Para que una imagen salga el  Tooltip
<a href="Url de la pagina" title="Titulo aquí lo que quieres que salga en Tooltip"><img src="Url de la Imagen" /></a>
Url de la pagina si no la quieren solo remplasenlo por /
Para un Enlace 
<a href="Url de la pagina" title="Titulo aquí lo que quieres que salga en Tooltip">Texto aqui
</a>

Listo ,al costado aparece cada uno que es ,están de su mismo color ok?Bueno , mas rato cuando vuelva pondré mas detalles de como cambiar color ,asi como le sabia poner antes ,que es cada cosa  si no entendieron algo avisenme,
VOTA POR MI ♥
Concurso de La Casita de los Kawaii, creo un concurso que se trata de hacer un diseño de navidad  , y estoy participando ¡ Si les gusto el diseño de navidad ,voten por mi,vayan a la siguiente entradita :
Solo tienes que dejar un comentario Votando por Luna  ,Se los agradezco 

Estare respondiendo sus comentarios en las entradas anteriores 


16 comentarios :

  1. Lo amoo, lo hare <3 DIOS RODOLFITO *3*

    ResponderEliminar
  2. Es muy bonito el tuto *w* , veré si le puedo hacer... y etto... gracias por la publi ,, la verdad es que en la otra entrada solo queria decirte que el diseño es genial!

    ResponderEliminar
  3. *u* mañana lo pienso usar muchisimas gracias yo tambien estoy en ese concurso aunque no espero ganar ya que mi diseño no es navideño pero me insistieron xD

    ResponderEliminar
  4. Muy lindo ^^
    También participo pero... el diseño es horrendo ¬¬

    ResponderEliminar
    Respuestas
    1. OwO ,tu diseño esta hermoso tambien *o* ,no esta horrendo como dices x3 ,seguro que ganas :3

      Eliminar
  5. Te quedo hermoso el nuevo diseño del blog! me encanta. Una pregunta los pedidos de plantillas siguen cerrados? Un beso!

    ResponderEliminar
    Respuestas
    1. Gracias, y Si, aun sigen cerrados ,pero empezando Enero estará abierto :3

      Eliminar
  6. precioso tu diseño nuevo, ya te vote en el concurso ^.^
    suerte y felices fiestas

    ResponderEliminar
    Respuestas
    1. *o* Muchas gracias por votar por mi :3 igualmente felices fiestas

      Eliminar
  7. Oww gracias por visitarnos ,si :3 ahorita te la mando a tu correo n.n¡
    Feliz Navidad >.o

    ResponderEliminar
  8. Luna!! andas ganando en el diseño eso creo xD pero amo tu diseño claro que el mío pierde pero amo tu diseño muy buen tuto me encantó. seguro lo uso para mi diseño veraniego. jejje besitos!
    atte:Larita

    ResponderEliminar
  9. aaahhh es un tutorial re lindo gracias por ponerme en recomiendo y ten por seguro que votare por ti

    ResponderEliminar
  10. Muy atrasado en años pero bueno, te aviso que el documento de google ya no esta disponible por lo que ya no sirve el tooltip :'(

    No sabes si resubieron el archivo? y de casualidad no conoces a alguien que sepa de java?

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥