Dale Estilo al Atributo 'title' en Blogger

Dale Estilo al Atributo 'title' en Blogger.

¿Quieres personalizar el estilo del atributo 'titile' que es usado en imágenes, links y texto?

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

¿Quieres una de estas?

Vamos ¡Vamos al Lío!

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

/**

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/AVvXsEj7m7KgQm3p9k5qw8FRpjRx_9EoPhw6TR4Htmo8HPqMxQjD1dQeFW2oxEpzf6HgxVaKfUMUjaj38BV75ozuIoph1K1FZiLPdtTD0ZFBxtvO6TUhyRnHXLfzX9zQbEDTSAmb_xGNfDTnRqA/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 verde 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:

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.