Blogger: Tabla de Contenidos

Ya pasó demasiado tiempo desde que Don Atealgo preguntaba si era posible tener un listado alfabético de TODOS los posts de un blog pero, parece que ha llegado el momento de responder a tanta insistencia [1] [2]
En realidad, hay que agradecérselo a Gem@ que, leyendo los comentarios nos indica dónde buscar la respuesta. Todo se basa en algo publicado por Beatiful Beta y que también explican en El escaparate de Rosa.

Vayamos por partes.

Lo primero que debemos saber es que, para mostrar una lista de los posts en una página, podemos usar la siguiente dirección URL:

http://nombreblog/search/label/?max-results=100

donde reemplazamos nombreblog por el de nuestro sitio y establecemos max-results como la cantidad de posts a mostrar (hasta un máximo de 100).

Evidentemente, esto no sirve de mucho porque lo que tendremos es una larguísima página y lo que necesitamos es mostrar sólo los títulos. Para lograrlo podemos modificando la plantilla. Vamos a Edición HTML, marcamos Expandir elementos y buscamos lo siguiente:

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

El resultado será que, en todas las páginas, excepto en la página principal y en las de posts individuales, sólo se mostrarán los títulos y cada uno de ellos será un enlace. Personalmente, descartaría esta solución porque no es muy elegante y, en todo caso, para este tipo de alternativas, es mejor recurrir al hack de Entradas expandibles del que habla la misma Gem@ en su blog.

Pero, la idea no es listar los posts que se ordenan cronológicamente sino ordenarlos alfabéticamente y esta es la parte interesante y, para la cual debemos recurrir al JavaScript.

El ejemplo más sencillo de implementar no requiere otra cosa que copiar y pegar aunque, más adelante, veremos cómo es posible personalizar el resultado.

Abrimos la plantilla y, en Edición HTML, marcamos Expandir elementos y buscamos el siguiente código:

<div id='main-wrapper'>

Lo que debemos modificar es la línea siguiente y es la que nos permite insertar un nuevo elemento en la misma columna donde están los posts. Normalmente, esa línea tiene dos posibles códigos:

<b:section class='main' id='main' showaddelement='no'>

o bien:

<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>

en cualquier caso, la cambiamos por:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

De esta manera, le estamos diciendo a Blogger que nos permita agregar elementos en esa sección hasta un máximo de 2 pero, si eventualmente ya la hubiéramos modificado antes, estableceremos el valor maxwidgets a un número superior (si dice 2 pondremos 3, si dice 3 pondremos 4, etc).

Guardamos la plantilla. Nada habrá cambiado pero, si vamos a Elementos de la página, veremos que ahora se nos ofrecerá la posibilidad de Añadir un elemento de página en la sección Entradas del Blog y lo haremos exactamente igual a como lo hacemos al agregar elementos en la sidebar. Click y seleccionamos HTML. Dejamos el título en blanco y escribimos el siguiente código:

<div id="toc"></div>

Guardamos y lo ubicamos arriba de las entradas (por defecto, aparecerá allí).

Ahora, añadimos un nuevo elemento de HTML en la sidebar que es desde donde controlaremos la tabla de contenidos. Ponemos cualquier título que nos guste y el siguiente código:

<div id="toclink">
<a href="javascript:showToc();">Show TOC</a>
</div>

<script src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"/></script>

<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"/>

donde, nuevamente, reemplazamos nombreblog por el de nuestro sitio. Guardamos y esos es todo.

Lo que se mostrará en la sidebar en un texto de enlace que dirá Show Table of Contents. Haciendo click en él, se desplegará una lista de este tipo, justo encima de los posts:

Lo que se mostrarán son tres columnas. La primera (POST TITLE) muestra los títulos de los posts ordenados cronológicamente; la segunda (POST DATE) muestra la fecha de publicación y la tercera (LABELS), las etiquetas de cada uno.

Cada uno de esos textos, será un enlace donde, al pasar cursor sobre ellos, se mostrará un tooltip con un pequeño extracto del contenido.

Lo interesante es que, haciendo click en los títulos de las columnas, podemos ordenar la lista de forma ascendente o descendente. Click sobre POST TITLE la ordena alfabéticamente , click sobre POST DATE la ordena cronológicamente.

Cuando la tabla está visible, el enlace de la sidebar cambia mostrando el texto a Hide Table of Contents. Haciendo click en ese enlace, la tabla vuelve a ocultarse.

Según dicen, como estamos limitados a listar sólo 100 posts, si queremos que se muestren más debemos modificar el código que agregamos en la sidebar. La última línea decia:

<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"/>

si quisiéramos mostrar hasta 200, inmediatamente después de esta, agregaríamos la siguiente:

<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"/>

si quisiéramos mostrar hasta 300, pondríamos las dos anteriores más esta otra:

<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=201&max-results=100&callback=loadtoc"/>

Es decir, vamos poniendo tantas líneas como necesitemos; cada una cargaría hasta 100 posts comenzando con el valor dado en start-index.

Pero, o hay algo que se me escapa o esto no es cierto; es más, puede ponerse un valor mayor que 100 y funciona perfectamente hasta un valor de 500.

En la práctica, parecería que el límite es 500 aunque el valor start-index que es con el que podemos controlar el inicio del listado puede cambiarse para establecer una especie de paginación.

<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=501&max-results=100&callback=loadtoc"/>

Estas limitaciones también nos obligan a utilizar algún otro criterio. Para funcionar, el script debe cargarse y recién luego se podrá verla tabla. Esto es tan así que, en caso de querer apurarnos, saldrá una ventanita indicando que esperemos ya que, primero lee los datos, luego los guarda en la memoria y por último los muestra.

En todo caso, si queremos mostrar muchos resultados, en lugar de colocar un elemento nuevo y un enlace en la sidebar, podríamos poner todo en un post, darle una fecha antigua y publicarlo. Incluso, podemos crear varios post diferentes, todos similares, con diferentes valores en start-index. En ese caso, nos olvidamos de todo lo dicho anteriormente y colocamos esto en un post:

<div id="toc"></div>
<div id="toclink">
<a href="javascript:showToc();">Mostrar Tabla de Contenidos</a>
</div>
<script src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://nombreblog.blogspot.com/feeds/posts/default
?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>

Nuevamente, nombreblog será el de nuestro sitio, start-index el inicio desde donde se mostrará y max-results la cantidad a mostrar.

Hasta acá, estamos usando el script original pero este puede ser modificado, si se tienen conocimientos de JavaScript es recomendable mirarlo porque es bastante sencillo y muy claro.

blogtoc_ORIGINAL.js es una copia del archivo original
blogtoc_TRADUCIDO.js es el mismo archivo original con los textos en español
blogtoc_REDUCIDO.js es una versión reducida donde he eliminado la columna etiquetas.

La personalización puede hacerse de dos maneras; modificando el script y/o agregando estilo CSS. Esto último, lo podemos hacer agregando las propiedades en la plantilla, por ejemplo, antes de </head>:

<style type="text/css">

#toc { /* es el bloque general */
[propiedades generales optativas: background-color, margin, etc]
padding: valor; /* es la separación entre el contenido y los bordes */
width : valor; /* podemos no colocarlo y será igual al ancho del área de posts */
}

.toc-note {
/* es el texto que aparece arriba indicando la cantidad de resultados */
}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
/* son los títulos de las columnas */
}
.toc-header-col1 {width: valor;} /* ancho de la primera columna */
.toc-header-col2 {width: valor;} /* ancho de la segunda columna */
.toc-header-col3 {width: valor;} /* ancho de la tercera columna */

.toc-header-col1 a:link, .toc-header-col1 a:visited,
.toc-header-col2 a:link, .toc-header-col2 a:visited,
.toc-header-col3 a:link, .toc-header-col3 a:visited {
/* propiedades de los enlaces en los títulos de las columnas */
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
/* propiedades para efecto mouseover en los títulos de las columnas */
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
/* propiedades del contenido de las columnas */
}
.toc-entry-col1 a, .toc-entry-col1 a:visited, .toc-entry-col1 a:link,
.toc-entry-col2 a, .toc-entry-col2 a:visited, .toc-entry-col2 a:link,
.toc-entry-col3 a, .toc-entry-col3 a:visited, .toc-entry-col3 a:link {
/* propiedades de los enlaces del contenido de las columnas */
}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover, {
/* propiedades para efecto mouseover del contenido de las columnas */
}

</style>

El script nos permite leer el contenido de los posts de nuestro blog y de cualquier otro:

<script src="http://nombreblog.blogspot.com/feeds/posts/default? .......

ya que nombreblog es cualquier blog alojado en Blogger:

<script src="http://vagabundia.blogspot.com/feeds/posts/default? .......

Por último, no es obligatorio colocarlo en la sidebar, podemos insertarlo en cualquier parte de la plantilla, en el footer, como parte de una barra de menúes o donde se nos ocurrra.

En esos casos, es probable que debamos reemplazar los símbolos & por su equivalente &amp; para que Blogger no nos de algún tipo de error.