La barra de navegación de Blogger

El par de códigos includable e include son una de las mejores ideas que tiene Blogger. Con ellos podemos ahorrarnos trabajo a la hora de escribir cosas que se repiten. Un includable es una "subrutina" o una función, algo que se ejecutará cuando lo deseemos, llamándolo con include.

Es fácil de entender si vemos uno elemental como este:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <span class='quick-edit-icon'>&#160;
      </a>
    </span>
  </b:if>
</b:includable>

Que lo que hace es agregar el ícono de edición donde lo querramos, para eso es que usamos esto:

<b:include data='post' name='postQuickEdit'/>

En resumen, include "incluye" el código de un includable cuyo id es igual al atributo name; en este caso, postQuickEdit.

Todos los includables deben tener un ID y este, debe ser único pero no todos deben tener el atributo data que sólo es necesario si deseamos "transferirle" algún tipo de dato. Ese es el caso del llamado nextprev que agrega una "barra de navegación" al final de las entradas:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
      .......
  </div>
</b:includable>

Está al final de nuestra página pero, no es obligatorio que esté allí; podemos colocarlo arriba si movemos esta línea:

<b:include name='nextprev'/>

y la colocamos inmediatamente después de:

<b:includable id='main' var='top'>

Tampoco hay nada que nos impida colocar dos barras, una arriba y otra abajo de nuestra página y personalizarlas de tal modo que se muestren diferentes; por ejemplo:

<b:includable id='main' var='top'>
  <div id='upper-blog-pager'><b:include name='nextprev'/></div>
    .......
    .......
    .......
  <div id='lower-blog-pager'><b:include name='nextprev'/></div>
</b:includable>

Les colocamos IDs diferentes por si queremos agregarles CSS. Por defecto las plantillas tienen estas definiciones de estilo:

#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }

que colocan el texto Entradas antiguas a la derecha, Entradas más recientes a la izquierda y Página principal en el centro. Para modificar esos textos o para cambiarlos por imágenes, basta expandir la plantilla y buscar estos tres códigos:

<data:newerPageTitle/> es el texto Entradas más recientes
<data:olderPageTitle/> es el texto Entradas antiguas
<data:homeMsg/> es el texto Página principal

podemos borrarlos y poner un texto personal o cambiarlos por una imagen usando la etiqueta IMG.