Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Agregar Tooltips con jQuery en tu blog




En otra entrada ya vimos y expliquemos como agregar Tooltips solamente con CSS en cada enlace o imagen. Hoy haremos lo mismo pero con un plug-in jQuery. El efecto consiste que al pasar el cursor por encima de una imagen, texto, o enlace, surja un mensaje estilo bocadillo o en forma de burbuja, muchas webs o  blogs lo usan para dar información extra en un espacio reducido. Para ver una demo, ves a mi web de juegos y pasa el cursor por cada imagen y verás que surge una ventana emergente tipo bocadillo, para darte más información sobre el juego al que vas a jugar, de eso trata este artilugio, es muy llamativo, vistoso, y sofisticado:



Demo!



Ahora para implantar este efecto en tu blog de Blogger sigue las siguientes pautas o instrucciones, como podrás visualizar a continuación paso a paso para no errar:

Añadir el Tooltip en tu plantilla de Blogger:

Vamos a Blogger»Plantilla»Edición HTML

Buscamos la siguiente línea (Ctrol + F)

</head>

Justo encima de </head> pegamos el Plugin jQuery y el script Tooltip:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/48457927/tooltipaizumblog.js"></script>

Ahora debemos de añadir los estilos CSS

Todavía en Edición HTML buscamos la siguiente línea con Ctrol + F

]]></b:skin>

Y antes de ]]></b:skin> pega el siguiente código CSS:

.tip { width: 212px; padding-top: 37px; overflow: hidden; display: none; position: absolute; z-index: 500; background: transparent url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top; } .tipMid { background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y; padding: 0 25px 20px 25px; } .tipBtm { background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom; height: 32px; }

Guardamos los cambios en la plantilla realizados anteriormente:

Por último cada vez que desees añadir el Tooltip en cada entrada o dónde se te ocurra, debemos de añadir el siguiente código HTML para enlaces o imágenes:

TOOLTIP CON TEXTO Y ENLACE

<a class="tTip" href="URL_Del_ Enlace" title="Texto_del_ToolTip">Nombre del Enlace</a>

PARA UNA IMAGEN SIN ENLACE

<img class='tTip' title='Texto_del_ToolTip' src='URL-IMAGEN'/>


Aizum Blog, domingo, julio 14, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9