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

Una demostración del script en funcionamiento:

Este es un enlace con vtip

Un texto en donde se aplica vtip

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/AVvXsEhgJRfZooQ7lwjqB6vPH-S1CyO6rtdLyfvV6ilUmiH15xLnzhuBONVM5BQMqlcTqF5ByvvDDY7g07xsTk_VEbFLWIGdHspMInyx4msyLCwpjseRoUOmAgDwq8SFFF4AX1mtS-aLkEFZiIE/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 :) 

Imprimir artículo