La paginación de los comentarios de Blogger

Aunque hace ya tiempo, en El escaparate de Rosa se mostraba la forma en que Blogger pagina los comentarios, son muchas las plantillas que no contienen los códigos necesarios y el tema sigue siendo motivo de consultas.

Si no utilizamos el sistema de avatares que es un agregado relativamente reciente, la forma de agregar el código faltante es el que muestra Rosa. En cambio, si utilizamos los avatares, el código es el mismo pero, la ubicación es levemente diferente.

En todos los casos, debemos buscar el includable correspondiente, expandiendo la plantilla y allí, agregaremos las líneas marcadas que son dos bloques idénticos ya que uno se muestra en la parte superior, antes del primer comentario y el otro en la parte inferior, luego del último.

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <h4>
        ......................................
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        ......................................
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        ......................................
      </p>

    </b:if>

    <div id='backlinks-container'>
        ......................................
    </div>
  </div>
</b:includable>

Esta paginación es controlada pura y exclusivamente por Blogger mismo y se aplica sólo cuando hay más de 200 comentarios en una entrada.

Como todo lo que se agrega de modo automático, las posibilidades de personalización son pocas sin embargo, el código es editable y podemos modificarlo un poco. Para eso, debemos entender qué significa cada cosa y eso es bastante simple, sólo son cuatro enlaces de texto:

<data:post.oldestLinkText/> es el texto «El más antiguo
<data:post.olderLinkText/> es el texto ‹Más antiguo
<data:post.commentRangeText/> es el texto con la cantidad (por ejemplo 201 - 400 de 443)
<data:post.newerLinkText/> es el texto Más reciente›
<data:post.newestLinkText/> es el texto El más reciente»
&#160; es un caracter espacio

Como cualquier otro texto por defecto, podemos cambiarlos e incluso, colocar todo el SPAN dentro de un DIV para luego controlarlo con CSS:

<div class='paginacioncomentarios'>
  <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> texto al primer comentario </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> texto a la página anterior </a>
    <data:post.commentRangeText/>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> texto a la página siguiente </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> texto al último comentario </a>
  </span>
</div>

¿Podríamos usar una imagen? Sí, en lugar de poner el texto, colocamos una etiqueta IMG como lo haríamos con cualquier otro enlace.

Y por último, algo de CSS para modificar la parte gráfica:

.paginacioncomentarios { /* el div contenedor */
  text-align: center;
}
.paging-control-container {  /* sobrescribimos las propiedades por defecto de Blogger */
  float: none !important;
  font-family: Tahoma;
  font-size: 12px;
  margin: 0 !important;
}
.paging-control-container a { /* los enlaces */
  margin: 0;
  padding: 0 10px;
}
.paging-control-container a:hover {
  /* cualquier propiedad */
}
.unneeded-paging-control {
  /* si queremos que los enlaces que no se utilizan no se vean en absoluto, usamos display:none; */
}