Crear galería horizontal de imágenes miniatura, con el gadget de entradas populares

Hace no mucho tiempo que blogger implementó un gadget que muestra las entradas populares del blog, que se basa en el número de visitas a las entradas ya sea en el último mes, o la última semana o en cualquier momento.

Vamos a darle estilos, para que se muestre como una galería de imágenes de forma horizontal, para poder colocarlo en la sección del main (arriba de las entradas), o en una sección nueva que hayas creado en  la cabecera, o debajo de esta, o donde tu quieras :), sin ocupar mucho espacio, como cuando se muestra en forma vertical.

Esto pudiera ser muy bueno para blogs que muestren recetas, o bien para mostrar imágenes que hablen por si solas.

¿Te gusta la idea? entonces, empecemos.

Paso 1: Agrega el gadget de entradas populares, ya sea a tu blog o a un blog de pruebas, si así lo quisieras, y configura la opciones de como mostrar las entradas populares (en cualquier momento, últimos 30 días, última semana) según quieras, y en Mostrar elige la opción imagen en miniatura, no selecciones fragmento, elige el máximo de de entradas a mostrar, considerando el ancho del espacio donde las colocarás.

Paso 2: Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS, y agrega ahí el siguiente código. Si es el primer gadget de Entradas populares, deberás cambiar #PopularPosts2,  por  #Popularposts1 respectivamente en todo el código.

/*ENTRADAS POPULARES EN FORMA DE GALERIA HORIZONTAL*/

#PopularPosts2 h2{

display: none; /*aquí eliminamos el título*/

}

#PopularPosts2 ul {

margin: 0; width: 100%;

padding: 0;

}

#PopularPosts2 .item-title{

display: none; /*aquí eliminamos el título de cada entrada*/

}

#PopularPosts2 ul li {

float:left;  /*aquí flotamos a la izquierda los elementos para que se muestren de forma horizontal*/

padding: 0 5px 0 4px; /*aquí las separamos*/

list-style-type: none; /*aquí eliminamos las viñetas */

}

#PopularPosts2 li img {

background: #fff; /*el color del fondo de la miniatura que funcionará como marco*/

padding: 4px; 

}

#PopularPosts2 li img:hover {

background: #0e0801; /*el color de fondo al poner el puntero encima de la imagen*/

}

Nota:   Ubícate después de última llave de cierre { (por ejemplo), y haz click en la tecla enter, para que se interprete el código que agregaste, ya que al pegarlo, no se lee, a diferencia de cuando se escribe linea por linea.

Paso 3: Desde ahí, puedes ver los cambios, una vez que te gusten los resultados haz click en APLICAR AL BLOG.

Si quisieras conservar el título, elimina del código anterior...

#PopularPosts2 h2{

display: none;

}

...y en su lugar pon este, además puedes darle algunos estilos...

#PopularPosts2 h2 {

padding: 0;

text-align: left;/*para alinear el título*/

color: #000000; /*color de la letra del título*/

font-size: 15px;

}

Las imágenes miniaturas miden 72 X 72 pixeles por defecto, se pudiera aumentar el tamaño un poco, aunque no mucho para no alterar la calidad de la imagen, y buscando que las medidas sean proporcionales,  para que no luzcan distorsionadas, por ejemplo:

#PopularPosts2 img{

width:80px; /*el ancho de la imagen*/

height:80px; /*el alto de la imagen*/

}

Tips: puedes crear una imagen para el fondo interesante para que luzca mejor.

¿Qué te parece?