Ultimos posts animados

Una consulta del blog Poca Tinta me llevó enterarme de una forma de mostrar los últimos posts publicados que no conocía.

Primero que nada, debemos descargar el script y alojarlo en un servidor propio.

Utilizarlo es sencillo, basta crear un elemento HTML en la sidebar e insertar el siguiente código:

<script src="URL_archivo/marqueeUltimosPosts.js"></script>

<script language="javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var postspeed = 2;
var postheight = 250;
</script>

<script src="URL_blog/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

<div style="text-align:center;">
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='down';">
<img src="URL_imagenHaciaAbajo"/>
</a>
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='up';">
<img src="URL_imagenHaciaArriba"/>
</a>
</div>

Donde los datos que debemos establecer son:

URL_archivo/marqueeUltimosPosts.js
es la dirección donde alojemos el script

URL_blog/feeds/posts/default
es la dirección de los feeds de nuestro blog; en mi caso sería:
http://vagabundia.blogspot.com/feeds/posts/default

URL_imagenHaciaAbajo u URL_imagenHaciaArriba
son las imágenes que sirven de enlace y que permiten que el desplazamiento se realice hacia abajo o hacia arriba.

Los otros valores nos permiten establecer algunos parámetros:

numpost = es la cantidad de post a mostrar (máximo 25)
showpostdate = muestra u oculta la fecha del post (true o false)
showpostsummary = muestra u oculta el texto de los post (true o false)
numchars = cantidad máxima de caracteres del texto del post (máximo 400)
postspeed = velocidad de desplazamiento (mínimo 1 y máximo 10)
postheight = altura en pixeles del elemento (máximo 500)

El script original posee algunas clases CSS específicas para poder personalizarlo gráficamente y le he agregado otras para poder manipularlo mejor. Para utilizarlas, agregamos el estilo justo antes de </head>:

<style type='text/css'>
#marqueeposts  { /* es el bloque completo */
en general esto no es necesario modificarlo
}
.marqueetitle { /* es el título de cada post */
margin: 5px 0 0 0px; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes)
}
.marqueetitle a { /* el título es un enlace */
cualquier propiedad deberá incluir la orden !important, por ejemplo:
color: Beige !important; 
}
.marqueetitle a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
} 
.marqueetext {  /* es el texto de cada post */
margin: 2px 0 10px 0; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes, fuentes)
}
.marqueemore a {  /* es el enlace (leer más) */
cualquier propiedad deberá incluir la orden !important
}
.marqueemore a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
}
.marqueedate {  /* es la fecha del post */
cualquier propiedad deberá incluir la orden !important
}
</style>

El resultado será algo así:

ULTIMOS POSTS

Recientemente me he encontrado con este mismo hack explicado en El Escaparate de Rosa. Allí la versión del script parece ser una traducción del original y es levemente distinta. Incluye otras opciones aunque también tiene una pequeña marca de "copyright" algo que, en lo personal, no me gusta.