Navegando con títulos

Hace un tiempo, en un par de artículos [1] [2] se generaba una interesante charla sobre cómo mostrar los títulos de los posts en la barra de navegación de Blogger. Mi aporte fue parcial ya que parecía imposible que se vieran bien, lo peor de todo es que los caracteres especiales no se veían y eran reemplazados por guiones.

Solrac prometió estudiar el asunto y buscar una solución y aquí está:

Link con título completo del post anterior y posterior

Todo se basa en usar JSON (JavaScript Object Notation), algo que aún escapa a mi entendimiento pero que parece funcionar correctamente.

Lo primero que debemos hacer es descargar el script correspondiente al que alojamos en un servidor propio.

Ahora, debemos ir a la Plantilla, Edición HTML y luego de hacer el backup correspondiente, Marcar la opción Expandir elementos y agregar el script, por ejemplo, justo antes de </head>:

<script src='URL_archivo/buscar_post_v0r1.js" type="text/javascript"/>

Ahora, debemos buscar la sección <b:includable id='nextprev'> que, normalmente tiene esta estructura:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
.......
</b:if>
<b:if cond='data:olderPageUrl'>
.......
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
.......
</b:if>
</div>
<div class='clear'/>
</b:includable>

Y reemplazamos lo que está marcado por el llamado a la función:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<script src="http://nombreBlog/feeds/posts/default
?alt=json-in-script&amp;callback=buscarpost">
</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
.......
</b:if>
</div>
<div class='clear'/>
</b:includable>

donde reemplazamos nombreBlog por nuestra dirección URL.

Eso es todo, el script es relativamente sencillo de entender de tal manera que puede adaptarse a nuestras necesidades y además, está muy bien documentado, explicando cada detalle. Puede verse el código AQUÍ.

Por ejemplo:

// Número máximo de post a buscar
max_post=100;

Indica la cantidad de posts analizados, y es un valor que puede aumentarse si nuestro blog tiene más pero, aparentemente, hasta un máximo de 500.

La parte final del es la que "escribe" el resultado y, de ser necesario, es la que deberemos modificar para que se adapte gráficamente a nuestra plantilla:

if (ant_posturl != '') {
/* Solo escribimos */
entry_ant_post = '<br /><span id="blog-pager-newer-link">
<a href="' + ant_posturl + '" title="' + ant_posttitle 
+ '" class="blog-pager-newer-link">&laquo; ' 
+ txt_anterior + ' &laquo; ' + ant_posttitle + '</a></span>';
document.write(entry_ant_post)
}

if (pos_posturl != '') {
entry_pos_post = '<br /><span id="blog-pager-older-link">
<a href="' + pos_posturl + '" title="' + pos_posttitle 
+ '" class="blog-pager-older-link">' + pos_posttitle + ' &raquo; ' 
+ txt_posterior + ' &raquo;</a></span><br />';
document.write(entry_pos_post)
}