CSS Jquery Menu Crear un Hermoso ToolTip para Blogger JQuery
En este tutorial veremos como crear un Hermoso Tooltip con Jquery para blogger en tus entradas.
Un Tooltip es una herramienta extra de información, muchos sitios lo utilizan para dar una
extra información a un enlace o una imagen. Hoy lo vamos a implementar en blogger


Antes veremos la demostración

Demostración

Para agregar el ToolTip

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
</head>
  • Paso 3: Justo por encima de </head> pegamos el Plugin JQuery
<script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip1.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip.js' type='text/javascript'/>
Nota:- Si ya has añadido un Plugin JQuery omitir este paso

Añadir los estilos ToolTip CSS

  • Paso 4: Todabia en Edicion HTML buscamos la siguiente lina Ctrol + F
]]></b:skin>
  • Paso 5: Justo por encima de ]]></b:skin> pegamos el Estilo CSS 
.tip { width: 212px; padding-top: 37px; overflow: hidden; display: none; position: absolute; z-index: 500; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSI2NdTg_6qJd2hNpKG4dk0ZfLj3I5DYwa9uqY3wWCD3Wx62GchvZnvYD6WkBshs6zc1RyeBm3A0IbBBUYKRDIDeqhuWX2EaeEtBrDdgRd9UKK8rgeCIqCtX7ZETlgCFqI7ZgCz3U3Tzg/s1600/hb_tipTop.png) no-repeat top; } .tipMid { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis7CGoqkOE8MocWL2Zlfe-4JHuThvgHhPxKkYzVzX1-4OpsYRK1u3Pzp0AW21XcvyvfoJR3tXbTWunQA5SzCnTWqOzgvrAlIwd2-qcW-dtnLNI3byTwX5btTsPsN5MtipqvRk3wIfotHg/s1600/hb_tipMid.png) repeat-y; padding: 0 25px 20px 25px; } .tipBtm { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV_DB9Uw2jCACNX1fMUaHGpfr1c2BrQAf2Jixnov-IMEubsiCmZ_ND6tjb4-mrbHPu-xKTJo4yKjT6RiUDMFoveMMX6iaUmN8srsIUdrXTer-kZAsURqwWxfjnA00W4eHQCwyNs4n_Y1c/s1600/hb_tipBtm.png) no-repeat bottom; height: 32px; }
  • Paso 6: Guardamos los cambio implementados en la plantilla 

Ahora para agregarlo en nuestras entradas, agregamos el siguiente codigo HTML

Tooltip con Texto y Enlace

<a class="tTip" href="URL Enlace" title="Texto del ToolTip">Nombre del Enlace</a>

Para una Imagen sin Enlace

<img class='tTip' title='Texto del ToolTip' src='URL-IMAGEN'/>
Nota:- Solo debes de hacer los cambios correspondientes y a disfrutar de un hermoso ToolTip
- - 4 Comentarios
Tag

Comentarios (4)

  1. Anónimo16 de marzo de 2013, 1:10

    Muy bueno, me has ayudado mucho, muchas gracias.

    ResponderEliminar
  2. Fernando Salas16 de marzo de 2013, 9:19

    @Iván Dangerfield

    Iván Dangerfield Gracias por tu comentario un abrazo

    ResponderEliminar
  3. DESCARGA CINE CLASICO21 de junio de 2013, 6:10

    No me ha funcionado para las imágenes ;((

    ResponderEliminar
  4. Fernando Salas21 de junio de 2013, 8:45

    @Imágenes SagitarioXP

    Funciona bien, lo unico que ya tengas instalado en tu plantilla el codigo JQuery. Si es así, has esto

    Antes de

    </head>

    Pega solamente este código JQuery

    <script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip.js' type='text/javascript'/>

    Cuéntanos como te fue

    ResponderEliminar

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar