Personalizar el Tooltip de tu blog

Aquí les dejo un tuto muy lindo y se trata de un Tooltip, esto no es más que una descripción que se muestra encima de los links de tu blog cuando pones encima el cursor. También se puede muestrar una imagen o fondo en color en lugar del texto....  y en este caso es lo que vamos hacer hoy! Le agregaremos color a los links al poner el mouse encima.....
Pero antes conozcamos que es un tooltip?
  • Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
  • Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.
Aqui un Ejemplo Visual, lo que indica la flecha roja en la captura sería el tooltip en un blog. Este puede variar en diseño y acción, pues puede funcionar en todos los enlaces de tu blog, o en algunos solamente, esto depende del código que se utilice...
Bueno informados ahora de lo que vamos hacer, vamos entonces a comenzar, que les guste y se animen y lo hagan! ...Comencemos:
1.- Buscar en el código de tu plantilla la siguiente etiqueta </head>
2.- Y encima coloca este 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'/>
3.- Luego busca la siguiente etiqueta ]]></b:skin>
div#qTip {padding: 3px;background: #eee5de; /* Cor de Fundo*/color: #8b8378; /* Cor da Fonte */position: absolute;z-index: 1000;border: 1px solid #8b8378; /* Cor da Borda */display: none;font: bold arial;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
4.- Ahora modifica lo que esta en color rojo en el código anterior. Estos son los colores, puedes colocarlos conforme los colores en tu blog. Aquí les dejo una pagina donde podrás encontrar los códigos de color (www).
Recuerden Siempre hacer una Copia de Seguridad de su Plantilla antes de Guardar.



Related Posts Plugin for WordPress, Blogger...

♥ Se el primero el en dejar su huella en este lugar!

❥ Un corazón agradecido siempre sabe decir gracias
❥ Y la forma mas fácil de decirlo es atraves de tus comentarios..
❥ Al hacerlo, se cordial y respetuoso..
❥ Se de bendición a los demás...
❥ Deja siempre la URL de tu blog para que podamos visitarte..
❥ Copia el código de texto para que agregues emoticones a tu comentario
❥ Para insertar imagen solo utiliza [img]URL de la imagen[/img]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para agregar un vídeo solo utiliza esto [video]URL del video[/video]
❥ Para crear marquesina se utiliza [ma]Aquí tu texto[/ma]
❥ Y recuerda: Dile NO al Spam...
❥ Bendiciones!

✿ TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿

≧◔◡◔≦ (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ღ ツ ☼ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀ ❁◕ ‿ ◕❁ (◡‿◡✿) (っ◕‿◕)っ (►.◄) ╍●‿●╍ (•_•) (◐.̃◐) ..^.^.. ʕ•ᴥ•ʔ εїз Ƹ̴Ӂ̴Ʒ .^◡^. (≧◡≦) ✿❀❁ ° ♥ ❤ ❥ ❣ ღ ♂ ♀ ✔♚ ♛ ✝ ✉ ۵ ϟ

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer


=^.^= APRENDE A CREAR GRAFICAS CRISTIANAS CON NUESTROS TUTORIALES o☂O PARA COMENZAR BUSCA LA PALABRA "ETIQUETAS" EN EL MENU O EN EL TAGS =^.^=
El material compartido en este Blog :b5: es Propiedad Exclusiva de su Respectivo Creador conforme cada material.
Las gráficas que creamos y aquí compartimos son libres de uso, mas NO pueden cambiar, ni borrar, ni alterar nuestra firma ni el diseño de la misma.
Nuestras gráficas son creadas para uso personal, NO comercial.
:b8:Por favor respeta el Derecho de Autor :b8:
Nuestras Gráficas están Protegidas
Si eres dueño de algúna imagen o material utilizado en este blog, y estas en desacuerdo en que sea utilizado por este medio, favor hacérmelo saber vía e-mail para dar los créditos correspondientes o eliminarlo según tu parecer.
Contactame :e6: en : :a5: pinceladasdeprincesa@gmail.com

☂ Este blog tiene días

☂ Siguenos en Twitter ☂