EL atributo "Title" es el que da información al usuario, ya sea que se aplique a una imagen, un enlace o un texto.
Esta vez aplicaremos mediante el uso de Jquery, una de las muchas "Tooltips" (asi llamadas en ingles) que darán un agradable agradable aspecto a nuestro contenido y mostraran de mejor forma la información que se inserte dentro del atributo "tiltle".
La utilidad que aplicaremos se llama "Vtip". Es creada por www.vertigo-project.com
Una demostración del script en funcionamiento:
Ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega allí el siguiente código.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> /** Vertigo Tip by www.vertigo-project.com Requires jQuery */ this.vtip = function() { this.xOffset = -10; // Distancia del cursor en X this.yOffset = 10; // Distancia del cursor en Y $(".vtip").unbind().hover( function(e) { this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' ); $('p#vtip #vtipArrow').attr("src", 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7acRRV9z6gN8JAEksojmD7V_sohrJDOI3LIRy2yjupXwI4ixo-B1k4-mJ4zTCvqi5X0ve83Ty-1M0sFfSamJCke1wcPakoxn_fZYa5gXoCy8DqgHFBhOSJf_LhRzc5lQ8DlldPgZp-k0/s1600/vtip_arrow.png'); $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow"); }, function() { this.title = this.t; $("p#vtip").fadeOut("slow").remove(); } ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("p#vtip").css("top", this.top+"px").css("left", this.left+"px"); } ); }; jQuery(document).ready(function($){vtip();}) </script> <style> p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 12px; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; max-width:400px; } p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px } </style>
El script resaltado en rojo es Jquery. Si ya lo tienes en tu plantilla entonces omítelo. Esta utilidad funciona con versiones de Jquery superiores a la 1.4.
Modifica el tamaño de la letra en font-size
Esto es lo mas básico, pero tu puedes modifcar algunos otros estilos.
Ahora para aplicarlo en el blog, se hará de la siguiente manera.
Para links:
<a href="URL-ENLACE" title="Aqui el titulo del enlace." class="vtip">Aqui el Nombre del Link</a>
Para Imagenes:
<img src="URL-IMAGEN" title="Aqui el titulo de la imagen." class="vtip" />
Para texto:
<div class="vtip" title="Aqui el titulo del texto.">Aqui el texto</div>
Ademas del atributo 'title' que necesariamente debes agregar, es indispensable que siempre introduzcas la clase vtip, que esta resaltada en naranja.
Quisiera ver como quedará en tu blog :)
