Listas de entradas aleatorias

Este truco de Oloman es muy bueno. Ya que hay varias formas de crear un enlace a un post aleatorio ¿por qué no hacer una lista con varios de ellos y colocarla en la sidebar?

Sólo debemos agregar un elemento HTML en nuestra plantilla y allí pegar el siguiente código:

<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:/miBlog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

donde, todo lo que debemos cambiar es miBlog por el nombre de nuestro sitio y, eventualmente, cambiar el valor de maxEntries (que por defecto es 10) por cualquier otro; esa, será la cantidad de títulos a mostrar.

El resultado, será una lista (UL LI) que tomará el aspecto de cualquier otra lista que tengamos y que, puede ser personalizada si agregamos definiciones en el CSS de nuestra plantilla; por ejemplo:

#random-posts {
  /* este es el rectángulo donde se mostrará */
}
#random-posts ul { /* la lista */
  list-style-type: none;
  margin: 0 10px;
}
#random-posts li {
  /* los items de esa lista */
}
#random-posts a { /* cada item es un enlace con el título de la entrada */
  background: transparent url(unaImagen) no-repeat 5px 50%;
  border-bottom: 1px solid #202931;
  border-top: 1px solid #202931;
  display: block;
  font-weight: normal;
  height: 16px;
  line-height: 16px;
  padding: 3px 5px 2px 20px;
}
#random-posts a:hover { /* efecto hover de esos enlaces */
  background-color: #101921;
  border-bottom: 1px solid #303941;
  border-top: 1px solid #303941;
}