Mostrar los títulos en la barra de navegación

Hace unos días, en uno de los artículo sobre Posts Relacionados, hubo dos comentarios que proponían algo interesantes:

Joseph preguntaba:
¿Conoces alguna forma de poner algo similar a los links de "Anterior y Siguiente" que tiene Blogger, pero en lugar de eso que muestre los titulos de las entradas... así como:
Siguiente: "Blogger: Posts relacionados (1)"
Anterior: "Blogger: Posts relacionados"?

Y Kurodesu agregaba:
Yo creo que sería cuestión de por medio de Javascript dividir el link a partir de los "-" y deshacerse de lo demás.

Estuve dándole vueltas al asunto y hay una forma de hacer esto con bastante sencillez pero, el resultado no es 100% perfecto.

El problema surge porque uno de los secretos mejor guardados del universo es la forma en que Blogger guarda los títulos del post anterior y el post siguiente. Parece ser un secreto de estado, no hay ninguna referencia la tema en ninguna parte, sólo hay preguntas y la respuesta más clara al respecto fue: "no sé, habría que preguntarle a los desarrolladores de Blogger".

Por lo tanto, nos encontramos con una limitación, sólo podemos usar los datos a los que sí tenemos acceso y ese dato nos da una dirección URL de este tipo:

http://nombreBlog.blogspot.com/año/mes/tituloPost.html

Parece no haber problema pero, lo hay. Por un lado, el título del post y la dirección URL (permanent link) son cosas diferentes. Si creamos un post con un cierto título y lo publicamos, la primera vez que lo hagamos, se generará una dirección. Si posteriormente lo editamos y cambiamos el título, Blogger lo hará perfectamente pero NO cambiará la dirección URL. Esto mismo pasará si publicamos un post sin título; se generará la dirección una vez y será inmutable. Para modificarla deberemos eliminar el post y volver a publicar uno nuevo.

A esto, se le agrega el problema de los caracteres especiales. Por ejemplo, ninguna dirección URL contendrá acentos, signos de interrogación o de admiración, comas, etc.

De ¿Blogger offline? podremos leer blogger-offline
De ¿A dónde va YouTube? podremos leer dnde-va-youtube

Por último, esto sólo podrá hacerse en las páginas individuales porque cualquier otra abre una página con una lista de posts y, por lo tanto, no hay titulos.

Si pese a todas estas limitaciones queremos hacerlo, el truco es bastante sencillo, debemos "leer" dos datos que nos provee Blogger y que se encuentran en la parte de navegación de la plantilla:

<data:newerPageUrl/> es la dirección hacia adelante
<data:olderPageUrl/> es la dirección hacia atrás

Y luego "interpretarlas" y "escribirlas" en lugar de los datos por defecto:

<data:newerPageTitle/> es el texto "Entradas más recientes"
<data:olderPageTitle/> es el texto "Entradas antiguas"

Vamos por partes, primero que nada, modificaremos la plantilla, marcando la opción expandir artilugios y buscamos el bloque correspondiente. Por defecto, se verá algo así:

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

  <b:if cond='data:newerPageUrl'>
    <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link'
          expr:href='data:newerPageUrl'
          expr:title='data:newerPageTitle'>
        <data:newerPageTitle/>
      </a>
    </span>
  </b:if>

  <b:if cond='data:olderPageUrl'>
    <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link'
          expr:href='data:olderPageUrl'
          expr:title='data:olderPageTitle'>
        <data:olderPageTitle/>
      </a>
    </span>
  </b:if>

  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
      <data:homeMsg/>
    </a>
  <b:else/>
    <b:if cond='data:newerPageUrl'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <data:homeMsg/>
      </a>
    </b:if>
  </b:if>

</div>
<div class='clear'/>
</b:includable>

Todo lo que haremos será modificar esas líneas resaltadas. La primera, contiene el enlace a las páginas siguientes:

<b:if cond='data:blog.pageType == "item"'>
  <a class='blog-pager-newer-link'
      expr:href='data:newerPageUrl'
      expr:title='data:newerPageTitle'>
    <script language='javascript'>
      var navURL = &quot;<data:newerPageUrl/>&quot;;
      escribirTitulo(navURL)
    </script>
  </a>
<b:else/>
  <a class='blog-pager-newer-link'
      expr:href='data:newerPageUrl'
      expr:title='data:newerPageTitle'>
    <data:newerPageTitle/>
  </a>
</b:if>

La segunda contiene el enlace a las páginas anteriores:

<b:if cond='data:blog.pageType == "item"'>
  <a class='blog-pager-older-link'
      expr:href='data:olderPageUrl'
      expr:title='data:olderPageTitle'>
    <script language='javascript'>
      var navURL = &quot;<data:olderPageUrl/>&quot;;
      escribirTitulo(navURL)
    </script>
  </a>
<b:else/>
  <a class='blog-pager-older-link'
      expr:href='data:olderPageUrl'
      expr:title='data:olderPageTitle'>
    <data:olderPageTitle/>
  </a>
</b:if>

En ambos casos, usamos un código condicional para que el script sólo se ejecute si estamos en una página individual; en cualquier otra, seguiremos utilizando el código por defecto.

Por último, agregaremos el script antes de </head>:

<script type='text/javascript'>
function escribirTitulo(navURL) {
  // dividimos la dirección URL en trozos con la barra inclinada como separador
  var partes = navURL.split(&#39;/&#39;);
  // la última, será el nombre de la página (por ejemplo indice-blogger.html)
  auxiliar=partes[partes.length-1]
  // reemplazamos todos los guiones por espacios
  auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
  // y eliminamos la extensión .html
  nombrePagina = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

  // formateamos el texto y ponemos la primera letra en mayúsculas
  var primerLetra = nombrePagina.substring(0, 1).toUpperCase();
  var elResto = nombrePagina.substring(1, nombrePagina.length).toLowerCase();
  nombrePagina = primerLetra + elResto;

  // y escribimos el texto
  document.write(nombrePagina);
}
</script>

Si quisiéramos poner el texto todo en mayúsculas, deberíamos cambiar la parte del formateo del texto por esto:

nombrePagina = nombrePagina.toUpperCase()

En este momento, está aplicado en este blog, no se si lo mantendré o lo sacaré pero, por ahora puede vérselo funcionando sin mayores problemas salvo las limitaciones antes citadas.