Como hacer listado aleatorio de entradas para blogger. En un gadget o en página

Como hacer listado aleatorio de entradas para blogger. En un gadget o en página.
En esta entrada verás como poder mostrar de manera aleatoria, los títulos de las entradas de tu blog.
Si haces el control respectivo, puedes insertar el código en una página o en un gadget, inclusive de manera múltiple para mostrar diferentes categorías o entradas de otro blog.

El ejemplo puedes verlo en el cuadro siguiente, si actualizas la página notarás que se muestran otras 7 entradas de manera aleatoria. Y si además, te vas hacia abajo de este post, notarás que tengo dos gadget insertados, mostrando hasta 5 entradas cada uno.

---

 ElectroSYSTEM
 Soluciones para mi blogger

---

La verdad es que implantarlo en tu blog es muy fácil, siguiendo estos pasos:
1. Inserta el siguiente código dentro de un gadget tipo HTML/JavaScript o si prefieres en una página.

<div id="contenedor-posts" >
<div id="posts-aleatorios-electrosystem" class="posts-aleatorios" >
<div class="cabecera-posts-aleatorios">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOf4NfOs3xUOjXsYY3qPbs_raBkr0lfVPtxJjIfyO5QLOJnEgMF-5KFoTcmAf93ibm_adDVzlIOxHCTfa8OCpzsxBgmpxomrC1nCrlBLaNTU7hppV770W6Y0wUjJW_WUfkee56KiLT8Q/s400/ElectroSYSTEM-Perfiles-Favicon%2528300x300%2529-circulo.png" class="imagen-posts" />
&nbsp;ElectroSYSTEM<br />
&nbsp;Soluciones para mi blogger</div>

<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 7;
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('posts-aleatorios-electrosystem');
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 cont = 0; cont < entry.link.length; ++ cont) {
  if (entry.link[cont].rel == 'alternate') {
  a.href = entry.link[cont].href;
  break;
  }
  }

  a.appendChild(document.createTextNode(entry.title.$t));
  li.appendChild(a);
  ul.appendChild(li);
}

container.appendChild(ul);
}
</script>

<script src="https://nombre-de-tu-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999" type="text/javascript"></script>

</div>

</div>


<!-- DEFINICIÓN DE ESTILO  -->
<style>
#contenedor-posts {
display: flex;
margin-left: auto;
margin-right: auto;
width: 40%;  /* cambia aquí si lo insertas en un gadget */
}

.posts-aleatorios {
background: #f3f3f3;
border-radius: 7px;
float: right;
padding: 7px;
width: 100%;
}

.cabecera-posts-aleatorios {
background: #3b66a2;
color: white;
font-weight: bold;
padding: 7px;
}

.imagen-posts {
float: left; width: 40px;
}
</style>

Si lo insertas en una página, el código está dispuesto dentro de un div contenedor, con la finalidad de que el cuadro se presente centrado.

Si lo insertas en un gadget, cambia la definición de estilo en #contenedor-posts y solo configura el width al 100%.

---

Continuamos después del siguiente espacio comercial...

---

Ahora sí, continuemos…


2. Configura lo que vas a presentar

No olvides escribir el nombre de tu blog en:

<script src="https://nombre-de-tu-blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999" type="text/javascript"></script> 

También puedes escribir el nombre de otro blog, si así lo requieres.

La forma anterior te presenta cualquier título de entrada de tu blog, pero si deseas presentar los títulos de entradas acorde a las etiquetas, puedes modificar la linea, de esta manera:

<script src="https://nombre-de-tu-blog.blogspot.com/feeds/posts/default/-/etiqueta?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999" type="text/javascript"></script>

Puedes controlar la cantidad de títulos a presentar, en:

var maxEntries = 7;

Cambia la url de la imagen.  Preferible es que sea una imagen cuadrada o el icono de tu sitio.
Coloca esta url donde corresponde, lo he marcado en amarillo.


Cambia el texto de cabecera. Puedes escribir el nombre del blog en la primera línea. El slogan en la segunda.  También puedes hacer referencia de la categoría mostrada, etc.
Lo he marcado en purpura.


Si deseas insertar múltiples cuadros, no olvides cambiar la referencia marcada en verde:

<div id="posts-aleatorios-electrosystem" class="posts-aleatorios" >

Sin olvidar la otra que está marcada más abajo en:

var container = document.getElementById('posts-aleatorios-electrosystem');

Cambia la palabra electrosystem por otra, por ejemplo electrosystem1 o la que desees.  Pueses escribir el nombre del blog o de la categoría a la que hagas referencia.

En otras palabras, no olvides que tienes que hacer estos dos cambios por cada cuadro que desees presentar.


Eso es todo, lo demás puedes adaptarlo según tu requerimiento acorde a tu tema, configurando colores o tamaños.


Espero que te haya servido este contenido. No olvides comentar o compartir si te gustó.

Quizás te interese:

Blogger. Suscripción por correo electrónico.
FeedBurner. Configuración y personalización paso a paso.

---