Tabla de contenidos por categoría

Esta es una variante muy interesante para crear una Tabla de Contenidos, creada por Abu Farhan que lista las entradas del blog, ordenadas alfabéticamente, organizadas por categoría y con una marca en los últimos diez posts publicados.

Click para ver el ejemplo online.

Utilizarla tal como está es muy simple. Debemos crear una página estática y agregar el siguiente código donde lo único que debemos establecer es la URL de nuestro sitio:

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen"></link>
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&amp;callback=loadtoc"></script>

De aquí en adelante, todo es un problema de personalización así que vamos a ver esos detalles.

Primero que nada, una aclaración, este script y todos aquellos que utiliza json para leer los feeds tienen, por lo general, un párametro que indica la cantidad de entradas a leer; en este caso y en muchos otros, dice: max-results=9999. La teoría de este número 9999 es que, de esa forma, se leerán TODAS las entradas pero, eso no es cierto ya que, pongamos el número que pongamos, el máximo a leer son 500 y por o tanto, ni esta ni ninguna otra tabla de contenidos, mostrará el 100% de las entradas. Si, por algún motivo, se necesitan mostrar más hay que hacer otra llamada; es decir, crear otra página y cambiar el script indicando desde donde hasta donde se va a leer.

Esto mostraría 500 entradas empezando con el post número 501 (ver ejemplo):

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

y esto mostraría otras 500 entradas empezando con el post número 1001 (ver ejemplo):

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

El segundo tema importante es que, si bien podemos usar los archivos tal como los provee el desarrollador, siempre conviene que descarguemos una copia de los mismos para evitar sorpresas.

Por último, la personalizacion del script debemos hacerlas con CSS. En este caso, el estilo se encuentra en el archivo gfdynamicfeedcontrol.css que es un archivo que utiliza Google para mostrar feeds y que podemos modificar a gusto y simplificar bastante ya que contienen una enorme cantidad de definiciones que no se utilizarán en absoluto. Lo básico es esto:

/* el rectangulo donde se mostrará */
#feed-control { /* no requiere definiciones */ }

/* el rectangulo interno donde se mostrará el contenido */
.gfg-root {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}

/* los títulos de cada etiqueta */
.gfg-subtitle {
overflow:hidden;
white-space:nowrap;
}
.gfg-subtitle a { /* cada título es un enlace  */
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-subtitle:hover  { /* efecto hover sobre esos enlaces */ }

/* cada rectángulo con la lista de entradas de una etiqueta */
.gfg-list {
position : relative;
overflow : hidden;
margin: 10px 0;
}
/* cada item de esa lista */
.gfg-list li {
list-style-type: none;
}
/* cada enlace esta en un DIV */
.gfg-listentry {
overflow: hidden;
white-space: nowrap;
}
/* podemos darle fondos distintos intercalados ya que se diferencian los apres de los impares */
.gfg-listentry-odd { }
.gfg-listentry-even { }
/¨* en enlace a cada entrada */
.gfg-listentry a {
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-listentry a:hover { /* efecto hover sobre esos enlaces */ }

/* limpia las flotaciones de algunas etiquetas */ 
.clearFloat {clear: both;}

Y eso es todo; no puede mostrarse mucho más ya que el diseño gráfico dependerá de cada plantilla y de la imaginación de cada uno.