Artículos recientes con miniaturas en Blogger.

Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!

A través del práctico blog de Rosa, descubro este script publicado en The MLxperience con el que es posible crear un widget en Blogger que muestre una lista con el título, un pequeño resumen de los últimos posts y, lo más importante, las miniaturas de las imágenes publicadas junto a los artículos. En caso de que no haya imágenes publicadas en los posts, el propio código prevé una serie de imágenes que se añadirán de forma aleatoria.

Este widget, código, script, gadget o como quieras llamarlo no sólo es una una funcionalidad más que añadir a tu blog, sino que también representa un paso más en el camino hacia la construcción de plantillas estilo magazine en Blogger, cuestión que reflejan ya algunas de las entradas publicadas de un tiempo a esta parte y que marca la dirección a seguir en futuros artículos.

Su instalación es bastante sencilla y cuenta con varias opciones de personalización que te facilitarán la tarea de adaptar el diseño del elemento a la apariencia de tu plantilla.

Instalación

• Lo primero que tienes que hacer es descargar el script desde aquí, descomprimirlo y alojarlo en algún servicio de pago o gratuito como Google Pages por ejemplo.


• Entra en el panel de elementos de página en Blogger y añade un nuevo elemento HTML/Javascript.



• Copia allí el siguiente código, reemplazando en la antepenúltima y última línea las direcciones url por las de tu blog (home_page) y la de tu script en el servicio de alojamiento (script src):

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";

showRandomImg = true;

tablewidth = 220;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 50;
imgheight = 50;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";

numposts = 5;

home_page = "http://TUBLOG.blogspot.com/";

</script>
<script src="http://DIRECCIÓNDETUSCRIPT/recentposts_thumb.js" type="text/javascript"></script>

Personalización

Los atributos establecidos en el script anterior tienen los siguientes significados:

• imgr[0] = …; Imágenes que se muestran de forma aleatoria en caso de que el post no contenga ninguna.



• tablewidth = 220; Ancho en píxeles del elemento.


• borderColor = “#ffffff”; Color del borde.


• bgTD = “#ffffff”; Color de fondo del gadget.


• imgwidth = 50; Ancho de la miniatura de imagen.


• imgheight = 50; Alto de la miniatura de imagen.



• fntsize = 12; Tamaño del título del post.


• acolor = “#666″; Color del título.


• showPostDate = false; Fecha del post. “True” para mostrarla y “False” para ocultarla.


• summaryPost = 50; Número de caracteres del resumen que se muestra del post.


• summaryFontsize = 11; Tamaño de texto del resumen.



• summaryColor = “#666″; Color de texto del resumen.


• numposts = 5; Número de entradas a mostrar en el elemento.

Resultado

De forma general, el widget se podría personalizar aún más delimitándolo con una etiqueta div, especificada con una .clase (div class=”recent”) o con un #id (div id=”recent”). Además, Rosa ha tenido la amabilidad de compartir el script modificado con el que mostrar la lista de artículos recientes alineados horizontalmente, por si este formato se ajustara más a tus necesidades.

Fuente: Zona Cerebral