Quickribbon

jueves, 12 de abril de 2007

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

10 comentarios:

Javier dijo...

He dejado un comentario al post sobre esto en BeautifulBeta, donde indico el path de la traducción al español que he hecho del mismo, por si os interesa.
También allí comento algún problema que me da con el refresco de gifs cuando se muestra el índice. Si alguno tenéis la solución,será bienvenida.

Zaebos dijo...

Ok, pues gracias...
;)

Kolbus dijo...

Gracias por la traducción Javier, la he incorporado a mi blog.

Haciéndole un pequeño apaño, he colocado un enlace en la cabecera desde donde muestro u oculto el TOC, para no tenerlo en el lateral.

Un saludo.

Gustavo, la rana dijo...

Gracias zaebos por tu ayuda que me ha sido muy útil, ya que estoy muy verde en esto de los blogs. Y a pesar de todo ya tengo funcionando desde hace unos días mi blog http://croarycroar.blogspot.com. He insertado el enlace de Tabla de Contenidos, pero me gustaría ponerla en español. Veo que Javier ha hecho una traducción, me la he descargado pero realmente no sé qué hacer con ella (es un archivo .js). Igual es una pregunta estúpida pero ¿como lo aplico para traducir TOC?. Muchas gracias por toda tu ayuda.

Zaebos dijo...

http://tomatmus.googlepages.com/blogtoc_SP.j

Esto es la dirección donde javier ha alojado el script traducido al español....

si quieres aplicarlo deberas poner esa línea en donde tienes esta otra:

http://home.planet.nl/~hansoosting/downloads/blogtoc.js

Gustavo, la rana dijo...

Hecho!! Muchas gracias y perdón por mi ignorancia porque a veces me pierdo en cosas como estas. Como decía antes, estoy empezando...

javier dijo...

Hacía tiempo que no visitaba este blog, y he visto que la traducción que hice del blogtoc ha sido usada ya por algunos. Bueno, para eso la deje. Pero os recomiendo que os la descarguéis y la pongáis en algún servidor de donde poder usarla, porque no os garantizo que vaya a estar siempre disponible en la URL que indiqué. Pero tampoco tengo prisa en quitarla, tranquilos.
Si no tenéis un servidor donde dejarlo, os recomiendo usar googlepages, donde tenéis espacio gratuito para ello.
Tampoco os puedo asegurar que la vaya a actualizar con otros cambios que vayan saliendo en el original (si es que lo hacen). Yo de hecho ya no la uso así sino que he tenido que retocar bastantes cosas y tengo ahora otra versión, porque como ya dije en mi comentario original, los gifs animados no se ven muy bien con los links y tuve que rehacerlo y ponerle botones que quedan más feos pero se llevan mejor con estos gifs.

Susana dijo...

Realmente muy interesante y más que útil para mí esta entrada!!!
Realmente muchas gracias por el dato y por la explicación.

Davitociber dijo...

Hola Zaebos, me parece muy interesante todo lo que publicas, ya he insertado en mi blog de pruebas varias cositas que vi por tu blog y excelente sin problemas, pero en esta ocasión no hay manera, lo he repetivo varias veces para ver donde fallaba pero no comprendo donde tengo el error ya que lo hago tal cual dices y no me sale, espero que puedas ayudarme, mi blog de pruebas en cuestión es este.

Gracias anticipadas, enhorabuena por tu blog y un saludo.

Davitociber dijo...

Olvidé decir que el enlace para desplegar la tabla de contenidos está en la sidebar, en la sección de pestañas archivos donde sale una imagen de un niño con un periodico diciendo extra, verás una pestaña que dice Lista de archivos.

Un saludo.

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas