La plataforma Futudownloads está en desarrollo.

30 nov. 2012

Tooltips para tu Blog o Sitio Web con Jquery

Los tooltips son muy utiles para dar informacion de un enlace o imagen sin usar espacio en la entrada.
Los sitios más importantes usan tooltips en sus sitio, Google, facebook, twitter, youtube, itunes , etc...
Los usan por su organizacion.

Tu tambien puedes agregar tooltips a tu sitio web o blog siguiendo los siguientes pasos.
  • Ve a Plantilla, Edicion de HTML.
  • Luego busca la etiqueta ]]></b:skin>, y encima de ella pega lo siguiente.
 /* JTip */
.tip_window {
    padding:5px;
    width:200px;
    border:1px solid #fff;
    background-color:#000;
    color:#fff;
    text-align:center;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px #6e6d6e;
    -moz-box-shadow: 1px 1px 3px #6e6d6e;
    box-shadow: 1px 1px 3px #6e6d6e;
}
/* try this for another style option
.tip_window_other {
    width:320px;
    padding:5px;
    color:#fff;
    text-shadow:-1px -1px 0px #2e83ce;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    border:3px solid #fff;
    outline:2px solid #2e83ce;
    background: #b2e1ff;
    background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
}
 */ 
  • Recuerda que lo que está negreado es lo que puedes editar.
  • Luego busca etiqueta </head> y encima de ella pega lo siguiente.
<script src='http://code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/jTip/jTip.js' type='text/javascript'/>
<script>
$(document).ready(function(){
    $(&quot;.tip&quot;).jTip();
});
</script>
  • Los archivos .js están como enlace para que puedas descargarlos.
  • guardas los cambios.
  • Listo, ahora cuando hagas una entrada, pongas un gadget HTML o lo uses directamente en tu plantilla puedes agregar lo siguiente para que uses lo tooltips.
Enlace.
<a class="tip" href="#" title="Texto del tooltip">texto del enlace</a>
  • El # es donde pondrás el enlace, El Texto Purpura es donde agregarás el texto del tooltip y lo que ves en rojo es donde pondrás el texto del enlace. Ejemplo
<a class="tip" href="http://futudownloads.blogspot.com" title="Sitio web de tutoriales">futudownloads</a>  
Imagen.
<img class="tip" src='"URL de la imagen" title="Texto del tooltip"/> 

Para Sitios Web

Ejemplo:
futudownloads


Qtiquetas: Jquery 1.5.1 a jquery 1.8.3
Dificultad: baja
Licencia: Free
Fuente: Vanity.enavu.com