Lista de entradas al azar

Ya hay una buena colección de entradas en este blog dedicadas a diferentes cacharritos que muestran cosas de forma aleatoria. Pero todavía nos quedaba uno pendiente. Se trata de un gadget javascript, que nos muestra un número de enlaces de texto predeterminado por nosotros, que apuntan a otras tantas entradas escogidas de forma aleatoria.

Estas que hay a continuación, son un ejemplo y refrescando podreis comprobar que cada vez salen unas entradas distintas:

La implantación es muy sencilla, como casi siempre.

Desde Elementos de Página añadimos un nuevo gadget tipo HTML/JavaScript y allí pegamos lo siguiente:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Antes de Guardar, cambiamos NOMBRE_DE_TU_BLOG por el propio. Una vez salvado, ya podemos moverlo a otra posición de la barra lateral o a otra ubicación.

El valor de var maxEntries = 10; es el que determina el número de entradas a mostrar y por tanto, el que habria que cambiar para mostrar más o menos entradas.

Creando el ID random-posts y las clases para listas correspondientes, podremos personalizar la apariencia de salida. Esto ya habría que insertarlo en la plantilla, antes de b:/skin. Para ponerlo en el propio gadget, habría que hacerlo entre las etiquetas <style type="text/css"> y </style>

#random-posts {
/* Estilo general */
}
#random-posts ul {
/* Estilo general de la lista */
}
#random-posts ul li {
/* Estilo general de cada elemento de la lista*/
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter