Entradas Relacionadas en Blogger [Widget]

Este código implementa un widget de «Entradas Relacionadas» para Blogger, diseñado para mostrar automáticamente artículos relevantes al final de una publicación. Su funcionamiento se basa en las etiquetas compartidas entre las entradas. El script recupera dinámicamente el título, la URL y la miniatura de cada artículo sugerido. Una de sus características clave es el manejo inteligente de imágenes: si no encuentra una miniatura oficial, busca la primera imagen dentro del contenido de la entrada para usarla como alternativa, asegurando que cada enlace tenga un componente visual. Además, elimina publicaciones duplicadas para ofrecer una lista limpia y acorta los títulos demasiado largos para mantener la uniformidad. El código incluye sus propios estilos CSS, que utilizan Flexbox para crear un diseño de cuadrícula moderno y adaptable (responsive), garantizando una visualización óptima tanto en computadoras de escritorio como en dispositivos móviles.

Insertar el código de la Tabla 1 después de <div class='post-footer'>

Tabla 1
Código a insertar

<!-- Entradas relacionadas con miniatura. Script y estilo-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Estilos modernizados con Flexbox */
#related-posts {
  margin: 20px auto;
  padding: 10px;
  background: #02184c;
  font-family: &#39;Neuton&#39;, sans-serif;
  border-radius: 5px;
  box-sizing: border-box;
}

#related-posts h4 {
  display: block;
  font-size: 30px !important;
  color: #fff !important;
  font-weight: bold;
  line-height: 1.2;
  margin: 13px 0;
  padding: 0 10px;
  text-align: center;
}

#related-posts .related-link-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px; /* Espacio entre las tarjetas */
}

#related-posts a {
  display: block;
  flex: 1 1 calc(50% - 7.5px); /* Dos posts por fila con espacio entre ellos */
  max-width: calc(50% - 7.5px);
  padding: 0;
  background: #fff;
  border-bottom: 10px solid #02184c;
  text-decoration: none;
  color: black;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para un look más atractivo */
}

#related-posts a:hover {
  background: #eee;
  text-decoration: none;
}

#related-posts a img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

#related-posts a .titulo {
  padding: 15px 10px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  box-sizing: border-box;
  text-align: left;
}

/* Estilo para pantallas pequeñas (un post por fila) */
@media (max-width: 600px) {
  #related-posts .related-link-container {
    flex-direction: column;
    gap: 10px;
  }

  #related-posts a {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();

function related_results_labels_thumbs(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    try {
      thumburl[relatedTitlesNum] = entry.media$thumbnail.url;
    } catch (error) {
      s = entry.content.$t;
      a = s.indexOf("<img");
      b = s.indexOf("src=\"", a);
      c = s.indexOf("\"", b + 5);
      d = s.substr(b + 5, c - b - 5);
      if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
        thumburl[relatedTitlesNum] = d;
      } else {
        thumburl[relatedTitlesNum] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDpj-B1pIYxRQcA-6_Hlsw0zyS1gEzZdEG-_6Bl_Nvu5cZCgPuK1wNBSfE13T6tDxlwLPno918OcvK0qA3_rEh-FNUKdzThlmPXZSzTZMnw9z1tKrLQ6H-5KKgT6xrCzKXZiaEHOiEXc/s400/noimage.png';
      }
    }
    if (relatedTitles[relatedTitlesNum].length > 150) relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 150) + "...";
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        relatedTitlesNum++;
      }
    }
  }
}

function removeRelatedDuplicates_thumbs() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  for (var i = 0; i < relatedUrls.length; i++) {
    if (!contains_thumbs(tmp, relatedUrls[i])) {
      tmp.length += 1;
      tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1;
      tmp3.length += 1;
      tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3[tmp3.length - 1] = thumburl[i];
    }
  }
  relatedTitles = tmp2;
  relatedUrls = tmp;
  thumburl = tmp3;
}

function contains_thumbs(a, e) {
  for (var j = 0; j < a.length; j++) if (a[j] == e) return true;
  return false;
}

function printRelatedLabels_thumbs() {
  var output = '';
  for (var i = 0; i < relatedUrls.length; i++) {
    if ((relatedUrls[i] == currentposturl) || (!(relatedTitles[i]))) {
      relatedUrls.splice(i, 1);
      relatedTitles.splice(i, 1);
      thumburl.splice(i, 1);
    }
  }
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;

  if (relatedTitles.length > 0) {
    output += '<h4>' + relatedpoststitle + '</h4>';
    output += '<div class="related-link-container">';
    while (i < relatedTitles.length && i < 20 && i < maxresults) {
      output += '<a href="' + relatedUrls[r] + '">';
      output += '<img src="' + thumburl[r].replace('/s72-c/', '/s500/') + '"/>';
      output += '<div class="titulo">' + relatedTitles[r] + '</div>';
      output += '</a>';
      if (r < relatedTitles.length - 1) {
        r++;
      } else {
        r = 0;
      }
      i++;
    }
    output += '</div>';
    document.write(output);
  }
}
//]]>
</script>

</b:if>

<!-- TERMINA Entradas relacionadas con miniatura. Script y Estilo -->

Integrar este widget en un blog de Blogger ofrece ventajas estratégicas tanto para la experiencia del usuario como para el SEO. Al presentar contenido relevante y visualmente atractivo al final de cada artículo, se fomenta la navegación continua, manteniendo a los lectores en el sitio por más tiempo. Esto se traduce directamente en una reducción de la tasa de rebote y un aumento en las páginas vistas por sesión, métricas fundamentales que señalan la calidad y el interés del blog a los motores de búsqueda. Desde la perspectiva de la optimización (SEO), el widget crea una red robusta de enlaces internos, lo que ayuda a Google a descubrir contenido más profundo y a entender las relaciones temáticas entre las publicaciones. Esta interconexión distribuye la autoridad de la página a través del sitio, pudiendo mejorar el ranking general de los artículos en los resultados de búsqueda.

Figura 1
Resultado Final de la implementación de este manual

Nota de transparencia:

Los fragmentos de código de este artículo fueron generados con la asistencia de la Inteligencia Artificial. El contenido ha sido revisado, curado y adaptado por el autor del blog para garantizar su precisión y utilidad.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional. Si necesitas utilizar alguna imagen, video o audio dirígete a la información proporcionada en las referencias. Esta publicación puede o no contener material con protección de datos o derechos de autor.