Entradas Populares para Blogger [Widget]

Este artículo presenta una guía técnica para personalizar el widget de entradas populares en la plataforma Blogger. El objetivo es transformar el diseño predeterminado en una interfaz moderna y funcional que mejore la experiencia del usuario y la optimización para motores de búsqueda (SEO). La metodología consiste en la sustitución de fragmentos de código XML/HTML del widget original por un código modificado, complementado con la adición de estilos CSS personalizados. El resultado es un widget visualmente atractivo con un diseño de cuadrícula responsivo. Se concluye que esta personalización fomenta la navegación interna y la retención de visitantes.

Localizar el widget "PopularPosts1" o similar y sustituir el código de color amarillo de la Tabla 1 por el código proporcionado en la Tabla 2

Tabla 1
Código original del Widget de Entradas Populares

<b:widget id="PopularPosts1" locked="false" title="Entradas Populares" type="PopularPosts" visible="true">
                <b:widget-settings>
                  <b:widget-setting name="numItemsToShow">6</b:widget-setting>
                  <b:widget-setting name="showThumbnails">true</b:widget-setting>
                  <b:widget-setting name="showSnippets">true</b:widget-setting>
                  <b:widget-setting name="timeRange">LAST_MONTH</b:widget-setting>
                </b:widget-settings>
                <b:includable id="main">
          <!--Default the title to 'Popular posts'.-->
          <b:with value="data:messages.popularPosts" var="defaultTitle">
            <b:include name="super.main">
          </b:include></b:with>
        </b:includable>
                <b:includable id="emailPostIcon">
          <!--Replace icon with text-->
          <span class="byline">
            <a class="flat-button" expr:href="data:post.emailPostUrl"><data:messages .emailpost=""></data:messages></a>
          </span>
        </b:includable>
                <b:includable id="footerBylines">
          <b:if cond="data:view.isSingleItem and data:widget.type == &quot;Blog&quot;">
            <b:include name="super.footerBylines">
          <b:else>
            <b:include data="{ items: [[&quot;share&quot;, &quot;comments&quot;]] }" name="footerBylinesOverride">
          </b:include></b:else></b:include></b:if>
        </b:includable>
                <b:includable id="headerByline">
          <b:if cond="data:view.isSingleItem and data:widget.type == &quot;Blog&quot;">
            <b:include name="super.headerByline">
          <b:else>
            <b:include data="{ items: [&quot;author&quot;, &quot;timestamp&quot;] }" name="headerBylineOverride">
          </b:include></b:else></b:include></b:if>
        </b:includable>
                <b:includable id="postLabels">
          <b:include cond="data:view.isSingleItem and data:widget.type == &quot;Blog&quot;" name="super.postLabels">
        </b:include></b:includable>
                <b:includable id="sharingButtonContent">
          <b:message name="messages.share">
        </b:message></b:includable>
                <b:includable id="snippetedPostContent">
          <div class="post">
            <b:class cond="data:post.featuredImage" name="has-featured-image">
            <b:class cond="not data:post.featuredImage" name="no-featured-image">
            <b:if cond="data:post.featuredImage">
              <div class="snippet-thumbnail">
                <a expr:href="data:post.url">
                  <b:include data="{                                      image: data:post.featuredImage,                                      imageSizes: [330,660,1320],                                      sourceSizes: &quot;(max-width: 660px) 100vw, 660px&quot;                                    }" name="responsiveImage">
                </b:include></a>
                <b:include name="headerByline">
              </b:include></div>
            <b:else>
              <b:include name="headerByline">
            </b:include></b:else></b:if>
            <b:include cond="data:this.postDisplay.showTitle" name="snippetedPostTitle">
            <div class="post-footer">
              <b:include name="footerBylines">
            </b:include></div>
          </b:include></b:class></b:class></div>
        </b:includable>
              </b:widget>

Copiar el código de la Tabla 2, por el cual sustituirás el código rojo de la Tabla 1

Tabla 2
Código modificado del Widget Entradas Populares

<b:if cond='data:blog.pageType == &quot;item&quot;'>

      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='popular-title'><data:title/></h2>
      </b:if>

      <div class='popular-posts-wrapper'>
        <ul class='popular-posts-list'>
          <b:loop values='data:posts' var='post'>
            <li class='popular-post-item'>
              <a class='popular-post-link' expr:href='data:post.href'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600,) : data:post.thumbnail' var='image'>
                    <img class='popular-post-thumb' expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title'/>
                  </b:with>
                </b:if>
                <span class='popular-post-text'><data:post.title/></span>
              </a>
            </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:if>

El código quedaría tal y como se muestra en la Tabla 3

Tabla 3
Código ya editado del Widget Entradas Populares

<b:widget id='PopularPosts1' locked='false' title='Más visto en el mes:' type='PopularPosts' version='1'>
                <b:widget-settings>
                  <b:widget-setting name='numItemsToShow'>6</b:widget-setting>
                  <b:widget-setting name='showThumbnails'>true</b:widget-setting>
                  <b:widget-setting name='showSnippets'>false</b:widget-setting>
                  <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
                </b:widget-settings>
                <b:includable id='main'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='popular-title'><data:title/></h2>
      </b:if>

      <div class='popular-posts-wrapper'>
        <ul class='popular-posts-list'>
          <b:loop values='data:posts' var='post'>
            <li class='popular-post-item'>
              <a class='popular-post-link' expr:href='data:post.href'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 600,) : data:post.thumbnail' var='image'>
                    <img class='popular-post-thumb' expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title'/>
                  </b:with>
                </b:if>
                <span class='popular-post-text'><data:post.title/></span>
              </a>
            </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:if>
  </b:includable>
              </b:widget>

Personalizar los estilos CSS para tener un mejor diseño, agregarlo antes de ]]></b:skin>.

Tabla 4
Código CSS

/* Entradas populares */

.popular-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 1rem;
  text-align: left;
}

.popular-posts-wrapper {
  display: grid;
  gap: 1rem;
}

.popular-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 1rem;
}

.popular-post-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-post-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.popular-post-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.popular-post-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.popular-post-text {
  font-size: 1rem;
  padding: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: #333;
  flex-grow: 1;
}

@media (max-width: 600px) {
  .popular-post-thumb {
    height: 200px;
  }
  .popular-post-text {
    font-size: 0.95rem;
    padding: 0.6rem;
  }

.popular-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 1rem;
  }

.popular-post-thumb {}

}

A continuacón se muestra el resultado de la implementación de los códigos anteriores y su resultado visual.

Figura 1
Resultado final para las Entradas Populares

Implementar un widget de entradas populares personalizado es una estrategia clave para fortalecer la estructura y el rendimiento de un blog. Desde la perspectiva del usuario, un diseño moderno y visualmente atractivo, como el que se logra con este código, captura la atención y fomenta la curiosidad. Esto invita a los lectores a explorar más contenido, aumentando el tiempo de permanencia en el sitio y reduciendo la tasa de rebote. Una tasa de rebote más baja es un indicador positivo para los motores de búsqueda, ya que sugiere que el contenido es relevante y valioso para la audiencia (Ahrefs, 2021).

En cuanto al SEO, este widget optimiza significativamente el enlazado interno. Al mostrar los artículos más populares en cada página, se crea una red de enlaces que distribuye la autoridad (conocida como link equity) a través del blog. Esto ayuda a los rastreadores de búsqueda como Googlebot a descubrir e indexar más eficientemente las páginas importantes, mejorando su visibilidad en los resultados de búsqueda (Google Search Central, s.f.). Por lo tanto, no es solo una mejora estética, sino una optimización funcional que potencia la navegabilidad y la autoridad del dominio.

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.

Referencias

Ahrefs. (2021, 25 de noviembre). What is bounce rate? How to measure and improve it. Ahrefs Blog. https://ahrefs.com/blog/what-is-bounce-rate/

Google Search Central. (s.f.). Prácticas recomendadas de vínculos para Google. Consultado el 30 de septiembre de 2025 en https://developers.google.com/search/docs/crawling-indexing/links-crawlable?hl=es-419

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.