Galería de Imágenes con el Gadget de Entradas Populares con Título Emergente

Hace unos días Oloman, publicó una entrada muy interesante, donde explica cómo aumentar el tamaño de las miniaturas o thumbnails de los gadgets de Blogger, usando un poco de JavaScript.  Esto nos permitirá mostrar imágenes más grandes, que las que Blogger envía por defecto.

Lo que haremos entonces usando esa posibilidad, será, crear una galería horizontal, y que el título de la entrada aparezca al poner el puntero del ratón sobre la imagen, creando un efecto de deslizamiento por medio de transiciones. A continuación puedes ver el resultado en la imagen.

click para ampliar

Aunque usaremos el script para agrandar las imágenes, este no supone una carga grande para el blog, ya que lo colocamos al final de la página, y el efecto del título lo conseguimos sólo con CSS. El resultado lo puedes ver ahora mismo en la demostración.

Demostración 

¿Te gusta, y le encuentras utilidad para tu blog?, entonces veamos como hacerlo.

Cómo implementarlo en el blog

Primero, agregas el gadget de Entradas populares, y lo configuras para que éste sólo muestre imagen en miniatura, sin el fragmento, como se aprecia en la imagen.

Luego, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS.

#PopularPosts1{margin:0; padding:0}
#PopularPosts1 h2{display:none}
#PopularPosts1 ul{width:100%; margin:0}
#PopularPosts1 .item-title a{display:none}
#PopularPosts1 a.title-popu span{Position:absolute; bottom:-8px; left:0px; filter:alpha(opacity=0); opacity:0; color:#fff; text-decoration:none; padding:5px 5px 5px 8px; background:#000; width:189px; display:block}
#PopularPosts1 li img, #PopularPosts1 a.title-popu span{-webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
#PopularPosts1 ul li{float:left; list-style-type:none; padding:0 5px 0 0; position:relative; top:0; left:0}
#PopularPosts1 li img{background:#ccc; padding:1px; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear}
#PopularPosts1 a.quickedit{display:none}
#PopularPosts1 li img:hover, #PopularPosts1 a.title-popu:hover span{opacity:.6; filter:alpha(opacity=60)}
#PopularPosts1 a.title-popu:hover span{bottom:8px}
#PopularPosts1 a.title-popu span:hover{color:#5658BB}

Algunas Notas del CSS:

• En #PopularPosts1 a.title-popu span definimos el color de fondo, del bloque donde aparece el titulo de la entrada, el color del texto en "color:#fff;", y le damos padding: " padding:5px 5px 5px 8px;" para separar el texto de los extremos.

• En #PopularPosts1 li img, le ponemos color de fondo en "background:#ccc;", y le damos padding " padding:1px;" para que simule el borde.

Después, vas a la edición de HTML de la plantilla, y con la ayuda de Ctrl F, buscas la parte del código que controla el widget de entradas populares, cuando estas sólo muestran imágenes:

<!-- (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>

Una vez identificado ese código, lo cambias por este:

<!-- (3) Show only thumbnails -->                                                                                     <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a class='title-popu' 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><data:post.title/></span>
                  </a>
                </div>

Nota: Para ubicar bien el código, identifica el comentario resaltado de azul, y el div de apertura y cierre resaltados de rojo.

Finalmente, y ya estando en la Edición de HTML de la plantilla pegas el siguiente script antes de </body>:

<script type='text/javascript'>                   function redimin(id,size){var artilugio = document.getElementById(id);var sustitucion = artilugio.innerHTML;artilugio.innerHTML = sustitucion.replace(/s72-c/g,"s"+size+"-c");var imagenes = artilugio.getElementsByTagName("img");for(var i=0;i&lt;imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height = size; }}redimin("PopularPosts1",200);                   </script>

Lo que resalté de rojo, es el ID del widget de entradas populares, si usaras un segundo gadget, lo cambiarás por PopularPosts2, lo mismo para el código CSS. Recuerda que blogger los va numerando de forma sucesiva.

Por último, verificas en vista previa y si todo luce bien guardas los cambios.

Notas finales:
-Te recomiendo este elemento al final de la página, ya que pueden verse las miniaturas antes de que se ejecute el script.

-Se puede cambiar el tamaño de la imagen, en el script viene resaltado de azul (200), y tendrás que hacer cambios en el CSS.

-En Internet Explorer no ocurre el efecto de deslizamiento del titulo del post, (hacia arriba) y el efecto en la opacidad, ya que no soportan las transiciones, sin embargo, si se verá la opacidad de la imágenes y el titulo que aparece al poner el puntero del ratón sobre la imagen.

-Puedes personalizar bordes, fondos, etc, etc.