Ultimas entradas con miniatura de imagen

Un gadget que me he encontrado en The MLxperience

Copiando y pegando en un gadget HTML de la sidebar el código que allí nos proporcionan, mostraremos las cinco últimas entradas de nuestro blog acompañadas de una miniatura de imagen cada una de ellas.

<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://TU_BLOG.blogspot.com/";

</script>
<script src="http://wrath.xzibition.com/~jellybeans/recentposts_thumb.js" type="text/javascript"></script>

Modificaciones:

En esta línea del código tendremos que colocar la url de nuestro blog:

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

Si bien en The XMLxperience nos proporcionan el código con el script incluido, nos recomiendan (y yo también lo hago) descargar el script y usarlo en el código desde
nuestro propio alojamiento.

Podéis descargarlo desde mi alojamiento.
Una vez alojado sustituimos en el código la url "antigua" por la nueva.

En el gadget se mostrará la miniatura de alguna de las imágenes que hayamos incluido en las entradas. Si hemos publicado alguna entrada sin usar imágenes y para evitar que el gadget pierda su estética, el script mostrará una imagen de forma aleatoria de las que hayamos incluido en el código.

Es en esta parte del código donde colocaremos las url de las distintas imágenes que se mostrarán cuando la entrada solo contenga texto:

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";

Como veis son cuatro imágenes distintas que podemos cambiar por las nuestras sustituyendo cada url por la de las nuevas imágenes.


Modificar el aspecto del gadget

tablewidth = 220; Ancho del gadget.
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 texto de los títulos.
acolor = "#666"; Color del título de entrada.
showPostDate = false; Fecha de entradas. No mostrar (false), Mostrar (true).
summaryPost = 50; Número de caracteres del resumen que se muestra de la entrada.
summaryFontsize = 11; Tamaño de texto del resumen de entrada.
summaryColor = "#666"; Color de texto del resumen de entrada.
numposts = 5; Número de entradas a mostrar en el gadget.

Además de todos estos cambios, también podemos usar el script modificado para que muestre nuestras últimas entradas alineadas en horizontal tal como podéis ver en The MLxperience debajo de su menú.

Esta forma de mostrar las últimas entradas es adecuada por ejemplo, para la sección del crosscol o el pie (footer) del blog.

Para lograr esto, seguimos los pasos anteriores pero colocando en el código la url del script modificado, después de descargarlo a nuestro PC y subido a un alojamiento adecuado.