Galería Horizontal con gadget de Entradas Populares con Título Deslizante (Tooltip)

Hace tiempo te decía como crear una galería de imágenes usando el gadget de entradas populares que ofrece Blogger, hoy vamos a crear una galería horizontal con ese gadget, y vamos a hacer que aparezca el título de la entrada en un tooltip.

Esto surge, porque estoy trabajando en una plantilla de recetas de cocina, (espérala muy pronto), y estaba pensando en incluirla, y hacerla mas funcional, mostrando el título de la entrada al poner el puntero del ratón encima de la imagen miniatura.

Inicialmente lo hice usando sólo CSS, y no queda tan mal, pero no tenía movilidad el tooltip, que es donde iría el título, así que mejor decidí probar un tooltip que funciona con jQuery, que exponen en el blog de Soh Tanaka, pensando en que ya  uso jQuery en la plantilla para otros propósitos.

Así es como luce:

Anque puedes ver como funciona en la plantilla que te menciono, y que pronto estará lista para ser descargada.¿Te gusta?, entonces veamos como hacerlo.

Antes de empezar necesitas agregar el gadget de entradas populares, y marcar la opción de imagen en miniatura, sin el fragmento, y elegir el número de entradas a mostrar...

Hecho eso, entonces, empecemos con la personalización...

Como hacerlo paso a paso

Paso 1. Primero necesitamos agregar los estilos o CSS y para ello, vas a Diseño > Diseñador de Plantillas > Avanzado  y en el campo para Añadir CSS agregas lo siguiente:

#PopularPosts2 {
margin: 10px;
}
#PopularPosts2 h2{
display: none;
}
#PopularPosts2 ul {
width: 100%;
margin: 0;
}
#PopularPosts2 .item-title{
display: none;
}
#PopularPosts2 ul li {
float:left;
list-style-type: none;
padding: 0 5px 0 4px;
}
#PopularPosts2 li img {
background: #fff;
padding: 4px;
transition: all .5s linear; /*Transiciones*/
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.tip { /*Tooltip */
color: #fff;
background:#120b01;
display:none;
padding:10px;
position:absolute;
z-index:99;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#PopularPosts2 li img:hover, .tip {
opacity:.6;
filter:alpha(opacity=60);
}
/*Para evitar el subrayado del texto del tooltip si se tuviera declarado en todos los enlaces*/
a.tip_trigger:hover {
text-decoration: none;
}

Lo que está marcado de azul, es opcional, la primera parte donde dice transiciones, es para crear efecto de desvanecimiento en la opacidad de la imagen en el hover, la segunda es para darle transparencia al fondo del tooltip, y la imagen, y la tercera para evitar que se subraye el texto del tooltip, cuando esté declarado en la plantilla en el hover de todos los enlaces, me refiero a esto:

a:hover {
...
text-decoration: underline;
}

Importante: Si es tu primer gadget de entradas populares el ID es #PopularPosts1, recuerda que Blogger los va numerando conforme los vas agregando.

Paso 2. Luego, vas a la edición de HTML de la plantilla, marcas la casilla de expandir plantilla de artilugios, y si no tienes jQuery lo agregas antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Paso 3. Inmediatamente después pones el script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); 
    }, function() {
        tip.hide();        
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; 
        var mousey = e.pageY + 20; 
        var tipWidth = tip.width(); 
        var tipHeight = tip.height();
        
        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);
          
        if ( tipVisX < 20 ) { 
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { 
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});
//]]>
</script>

Paso 4. Después, buscas la parte que controla el gadget de entradas populares, cuando este sólo muestra imágenes, y que se ve de este modo:

<!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>


...y lo cambias por esto:

<!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail' style='width: 72px; height: 72px;'>
                  <a class='tip_trigger' expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><span class='tip'><data:post.title/></span>
                  </a>
                </div>

Eso debería quedar antes del cierre de la condición: </b:if>, si no quieres que la entrada se abra en una ventana nueva, elimina lo que está de morado.


Paso 5.Verifica en vista previa, y si todo luce bien, guarda los cambios.

Listo, ya tienes un tooltip que muestra el título de la entrada de cada post respectivamente, en la galería de imágenes que muestra tus artículos más visitados =)

Notas

Como ya está implementado el tooltip, lo puedes usar en cualquier otro enlace de tu blog, ya sea para ponerlo en  imágenes que tengan enlace como en este caso, o bien, sólo en un enlace, y este es el HTML que necesitas:

Para un enlace:

<a href="#" class="tip_trigger">El texto del enlace<span class="tip">El contenido del tooltip</span></a>

Para una imagen:

<a href="#" class="tip_trigger"><img src="URL de la imagen" alt="" /><span class="tip">El contenido del tooltip</span></a>

Así de fácil y rápido ;)

*Actualizado