Tutoriales Sobre Blogger: Publicaciones aleatorias al dar clic

En este tutorial veremos como agregar publicaciones aleatorias, es un buen truco para ayudar a los usuarios a acceder a más artículos sin cambiar de página muchas veces, y los datos también se cargan después de que los usuarios hacen clic, por lo que no afecta la velocidad en absoluto cuando se carga la página. Cada ves que los usuarios den clic este se actualizara ya que el algoritmo aleatorio no se duplicara.

Comencemos

• Vamos a Blogger> Tema> Editar HTML.
• Buscamos la siguiente linea (Ctrol + F) 

]]></b:skin>

• Justo encima de ]]></b:skin> pegamos el código CSS 

.tb-random {
  outline: 0;
  background: #fff;
  border: 1px solid #eee;
  padding: 6px 12px 7px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.tb:hover {
  background: #f8f8f8;
}
.random-posts {
  margin: 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.random-posts .item {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 20px;
}
.random-posts .item:nth-of-type(3n) {
  margin-right: 0;
}
.random-posts .item .thumb {
  overflow: hidden;
  height: 160px;
}
.random-posts .item .thumb img {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
       box-sizing: border-box;
  border: 1px solid #f6f6f6;
}
.random-posts .item .thumb img:hover {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: scale(1.1) rotate(-1.3deg);
      -ms-transform: scale(1.1) rotate(-1.3deg);
          -moz-transform: scale(1.1) rotate(-1.3deg);
            -o-transform: scale(1.1) rotate(-1.3deg);
       transform: scale(1.1) rotate(-1.3deg);
}
.random-posts .item .content {
  margin-top: 10px;
}
.random-posts .item .content a {
  color: #333;
  font-weight: 600;
  font-size: 16px;
}
.random-posts .item .content a:hover {
  text-decoration: underline;
}

• Todavia en la plantilla HTML buscamos la siguiente linea (Ctrol + F)

</body>

• Justo por encima de </body> pegamos el código Javascript

<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
document.getElementsByClassName("tb-random")[0].addEventListener("click", e => {
  document.getElementsByClassName("random-posts")[0].innerHTML = "";
  fetch(`/feeds/posts/summary?alt=json&max-results=0`).then(response => response.json()).then(data => {
    let totalPost = data.feed.openSearch$totalResults.$t;
    let nums = [],
      gen_nums = [];
    for (let x = 0; x < totalPost; x++) {
      nums.push(x + 1)
    };
    var in_array = (array, el) => {
      for (let i = 0; i < array.length; i++)
        if (array[i] == el) return true;
      return false;
    }
    var get_rand = array => {
      let rand = array[Math.floor(Math.random() * array.length)];
      if (!in_array(gen_nums, rand)) {
        gen_nums.push(rand);
        return rand;
      }
      return get_rand(array);
    }
    for (var v = 0; v < 6; v++) {
      for (var w = 1; w <= 1; w++) {
        fetch(`/feeds/posts/summary?alt=json&max-results=1&start-index=${get_rand(nums)}`).then(res => res.json()).then(json => {
          let title, href, thumb;
          for (let n = 0; n < json.feed.entry.length; n++) {
            for (let s = 0; s < json.feed.entry[n].link.length; s++) {
              if (json.feed.entry[n].link[s].rel === "alternate") {
                href = json.feed.entry[n].link[s].href;
                break;
              }
            }
            title = json.feed.entry[n].title.$t;
            if ("media$thumbnail" in json.feed.entry[n]) {
              thumb = json.feed.entry[n].media$thumbnail.url.replace("s72-c", "s260");
            } else {
              thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_cGEgZL0NB2jbCbSUDYoG5TrYbDFUBbp4t-mYK1sxZLWphn2f-DCNN4fhjYW-0AxT4VmzY25OaStZt-YlZLQ4EqFhWyPp905vg0p-Yhp_iRTct-aEhBryeG0wX71U6yVqAt45gC1c9s/s1600-r/nth.png"
            }
            document.getElementsByClassName("random-posts")[0].innerHTML += `<div class="item"><div class="thumb"><a href="${href}"><img src="${thumb}"/></a></div><div class="content"><a href="${href}">${title}</a></div></div>`;
          }
        }).catch(e => console.error(e))
      }
    }
  }).catch(error => console.error(error))
  e.currentTarget.innerHTML = "Continuar encontrando mas entradas";
}, {
  once: false
});
//]]></script>
</b:if>

Solo queda agregar nuestro codigo HTML donde nosotros queramos ya sea en una entrada, en una pagina o dentro de nuestra plantilla

<b:if cond='data:view.isPost'>
<center><button class='tb-random' type='button'>Encuentra mas entradas</button></center>
<div class='random-posts'/>
</b:if>

Solo queda guardar y disfrutar. A continuación te dejare una demostración Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo