Agregar el gadget de Entradas Recientes en Blogger y personalizarlo

Este widget funciona mediante la combinación de JavaScript y CSS para mostrar las publicaciones más recientes de tu blog de Blogger. El código principal utiliza una URL del feed de tu blog para solicitar los datos de las últimas entradas en formato JSON. Una función de JavaScript procesa esta información, extrayendo el título, la URL, la imagen y la fecha de cada post. Dinámicamente, construye el código HTML para cada entrada y lo inserta en la página. Finalmente, el código CSS se encarga de dar un estilo visual moderno, organizando los posts en una cuadrícula (grid) con efectos visuales.

Insertar el código de la Tabla 1 después de <div class='post-footer'> Tambien puedes agregarlo en un Widget HTML/JavaScript

Tabla 1
Código Script

 <!-- CONTENEDOR DE PUBLICACIONES RECIENTES -->

<div id='RecentsPosts'>
  <h3>📌 Publicaciones Recientes</h3>
</div>

<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {
  document.write('<ul class="recent_posts_with_thumbs">');
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    if (!entry) break;
    var posttitle = entry.title.$t;
    var posturl = "";

    // Obtener URL del post
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == "alternate") {
        posturl = entry.link[k].href;
        break;
      }
    }

    // Obtener imagen
    var thumburl;
    try {
      thumburl = entry.media$thumbnail.url.replace("/s72-c/", "/s640/");
    } catch (error) {
      var s = entry.content.$t;
      var a = s.indexOf("<img");
      var b = s.indexOf("src=\"", a);
      var c = s.indexOf("\"", b + 5);
      var d = s.substr(b + 5, c - b - 5);
      thumburl = (a != -1 && b != -1 && c != -1) ? d : "https://via.placeholder.com/300x200?text=Blog";
    }

    document.write('<li class="post-card">');
    if (showpostthumbnails) {
      document.write('<div class="thumb"><a href="'+posturl+'" target="_top"><img src="'+thumburl+'" alt="'+posttitle+'"></a></div>');
    }
    document.write('<div class="post-info">');
    document.write('<h4><a href="'+posturl+'" target="_top">'+posttitle+'</a></h4>');

    // Resumen
    if (showpostsummary) {
      var postcontent = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";
      var re = /<\S[^>]*>/g;
      postcontent = postcontent.replace(re, "");
      if (postcontent.length > numchars) {
        var trunc = postcontent.substring(0, numchars);
        trunc = trunc.substring(0, trunc.lastIndexOf(" "));
        postcontent = trunc + "...";
      }
      document.write('<p>'+postcontent+'</p>');
    }

// Fecha de publicación
if (showpostdate) {
  var postdate = entry.published.$t;
  var cdyear = postdate.substring(0,4);
  var cdmonth = postdate.substring(5,7);
  var cdday = postdate.substring(8,10);
  var monthnames = ["","Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];
  
  document.write('<span class="post-date">'+cdday+' '+monthnames[parseInt(cdmonth,10)]+' '+cdyear+'</span>');
}
    document.write('</div></li>');
  }
  document.write('</ul>');
}
//]]>
</script>

<script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 130;
</script>

<script src='URL de tu Blog/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'/>
 
<!-- TERMINA CONTENEDOR DE PUBLICACIONES RECIENTES -->

El código de la Tabla 2 colocarlo antes de ]]></b:skin>

Tabla 2
Código CSS

 #RecentsPosts {
  text-align: center;
  margin: 30px 0;
  }

#RecentsPosts h3 {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  font-style: normal !important;
}

.recent_posts_with_thumbs {
  margin-right: 5%; /* Ajuste del contenedor a la derecha */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

.post-card .thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.post-info {
  padding: 15px;
}

.post-info h4 {
  font-size: 1.1rem;
  margin: 0 0 10px;
  font-weight: 600;
}

.post-info h4 a {
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: #333;
  transition: color 0.25s ease;
}

.post-info h4 a:hover {
  color: #2575fc;
}

.post-info p {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.4em;
  margin: 0;
}

.post-date {
  display: block;
  font-size: 1.0rem;
  color: #888;
  margin-bottom: 8px;
  text-align: right;
}

Implementar un widget de entradas recientes ofrece una doble ventaja que impacta directamente en la experiencia del visitante y en el posicionamiento SEO de tu blog. Para los usuarios, facilita la navegación y el descubrimiento de contenido nuevo, manteniéndolos más tiempo en tu sitio y fomentando que exploren más allá de la página de destino. Un blog que muestra actividad constante genera confianza y promueve visitas recurrentes.

Desde la perspectiva del SEO, los beneficios son aún más significativos. Este widget crea una red de enlaces internos de manera automática y sistemática. Cada vez que publicas un artículo, se generan enlaces hacia él desde otras páginas, lo que ayuda a los motores de búsqueda a descubrirlo e indexarlo más rápido (Google Search Central, s.f.). Esta práctica distribuye la autoridad de la página través de tu sitio, reduce la tasa de rebote y aumenta el tiempo de permanencia.

Figura 1
Resultado final

Nota Final

Coma-Media (2021, noviembre 23). Ambiente profundo [Soundtrack]. Pixabay. https://pixabay.com/music/ambient-deep-ambient-11051/

luis_molinero (s/f). Hombre guapo sosteniendo algo [Fotografía]. Freepik. https://www.freepik.com/free-photo/handsome-man-holding-something_1133269.htm

MDN Web Docs (2022, enero 01). CSS Tutoriales [Publicación en un sitio web]. https://developer.mozilla.org/es/docs/Web/CSS

MDN Web Docs (2022, enero 01). CSS básico [Publicación en un sitio web]. https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

SOULDHACKO (2012, agosto) Gadget de entradas recientes con imagen [Publicación en un blog]. https://souldhacko.blogspot.com/2012/08/gadget-de-entradas-recientes-con-imagen.html

W3C (2022, enero 01). Hojas de estilo en cascada pagina de inicio [Publicación en un sitio web]. https://www.w3.org/Style/CSS/

Referencias

Google Search Central. (n.d.). Guía de SEO para principiantes: optimiza la estructura de tu sitio. Consultado el 1 de octubre de 2025, de https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=es