Añadir enlaces a posts anterior y siguiente en nueva plantilla Blogger

Si queremos incluir los enlaces al artículo anterior y al siguiente en relación a cualquier artículo publicado en un blog de la plataforma tendremos que lidiar con el sistema de plantillas de Blogger.

Esto que era algo bastante sencillo en las plantillas clásicas se volvió todo un enredo en las más recientes plantillas orientadas a entornos responsive (móviles, tabletas, monitores, etc).

Sea como fuere la solución pasa por localizar el lugar deseado para incluir estos enlaces, habitualmente el final del artículo que estará identificado en la plantilla con el código:

<data:post.body="">

Y justo debajo incluir algo parecido a lo siguiente:

<b:if cond="data:view.isPost">
  <nav aria-label="Navegación de entradas" class="blog-pager" id="blog-pager" style="align-items: center; border-top: 1px solid rgb(234, 234, 234); display: flex; justify-content: space-between; margin: 40px 0px 20px; padding-top: 20px;">
    <b:if cond="data:newerPageUrl">
      <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" rel="next" style="color: #222222; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: opacity 0.2s;">
        ← Entrada siguiente
      </a>
    <b:else>
      <div>
    </div></b:else></b:if>
    
    <b:if cond="data:olderPageUrl">
      <a class="blog-pager-older-link" expr:href="data:olderPageUrl" rel="prev" style="color: #222222; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: opacity 0.2s;">
        Entrada anterior →
      </a>
    </b:if>
  </nav>
</b:if>


En el código indicado puedes modificar tanto el texto que aparecerá en los enlaces como el diseño. En este caso se trata de una solución bastante minimalista.

Comentarios