Tabla de Contenidos

Ya habíamos visto como poner los contenidos de nuestro blog según las categorías de cada uno de nuestros posts. Ahora vamos a ver algo parecido, pero que a mi me ha encantado y es que podremos ver TODOS nuestros posts listados por fecha y categorías en un perfecto orden alfabético y todo expandible y retraíble en nuestra página principal. Este truco me ha parecido de los mejores que he visto últimamente y como tantos otros se lo debemos a Beatiful Beta, que ultimamente está realmente activo y como es de ley, en Zona de Pruebas lo hemos puesto a eso... a prueba. El resultado es excepcional así que os comento cómo y qué hacer para ponerlo en vuestro blog. Si quereis saber un poco más de que se trata antes de poneros manos a la obra no teneis más que probar la "Tabla de Contenidos" de mi segunda barra lateral.
Tenemos que realizar unos cuantos pasos previos:
Lo primero, como siempre, es hacer una copia de seguridad de nuestra plantilla por lo que pueda pasar. El truco comienza en la plantilla de HTML si aún no hemos habilitado la zona superior de los posts para introducir elementos, así que si es el caso, primero hay que modificar la plantilla para permitirlo y lo podeis ver paso a paso en este otro post. Ahora nos vamos a la página de Diseño de nuestro Blog y justo encima del área de Posts añadimos este código como HTML y sin poner ningún título:

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

Guardamos los cambios y nos vamos a la columna lateral en donde queramos poner el truco en cuestión. Me refiero simplemente al vínculo que hará que se muestre u oculte el listado de posts, ya que la tabla se mostrará siempre en el área principal del blog, justo encima del post que tengamos al principio. Añadimos como HTML este código:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://TUBLOG.blogspot.com/feeds/posts/default?
alt=json-in-script&max-results=999&callback=loadtoc"></script>


Cambiar TUBLOG por el nombre del Blog donde lo estemos instalando.

El último paso es pegar los "estilos" que tendrá la tabla de contenidos. Es totalemente editable a gusto de cada uno, pero como ejemplo pondré el que estoy usando yo ahora mismo, que es igual que el de la fuente original excepto el color y el ancho, para ajustarlos mejor a mi diseño.

Los estilos se pueden poner en la zona <b:skin> de nuestra plantilla, pero yo he tenido problemas así que la solución más sencilla y que además facilita mucho la localización del código es introducirlo como un elemento HTML justo encima del código del script que hemos puesto en el paso anterior. El código para los estilos es el siguiente:

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:450px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ccddcc;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.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 {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Con esto debería de estar ya perfectamente instalado.

A partir de ahora podremos mostrar u ocultar nuestra tabla de contenidos (últimos 100 posts, aunque ya existe la manera de mostrar todos, pero ya se explicará si fuera necesario...). La tabla mostrará 3 columnas. En la primera veremos los títulos de los posts ordenados alfabéticamente y vinculados a su página correspondiente, de manera que podremos ir a cualquier artículo de la lista con un simple click. En la segunda columna veremos la fecha en la que fue editado por última vez ese post y en la tercera veremos las categorias bajo las cuales fue publicado con el añadido de que si pulsamos en las categorías listadas podremos hacer un filtro de la tabla para que sólo muestre los artículos de esa categoría en concreto. Por si fuera poco, permite ordenar el listado en función del título o de la fecha con tan sólo pulsar en el título de la columna que queramos y además, si hacemos filtrados por categoría y queremos ver todas nuevamente, no tendremos más que pinchar en el título de la columna de las categorías. No me digais que no es un truco realemente impresionante. :D