Indice o Mapa del Sitio automático

Muchos blogs están implementando los mapas del sitio o los indices para mostrar todas las publicaciones, esto tiene ventajas porque muestra de forma amable los títulos de las entradas manteniendo toda la información ordenada y explicita.

Ahora les voy a dar los pasos para que puedan usar el mismo indice que yo utilizó y darle unas pautas para lograr la personalización para que lo puedan adaptar a sus necesidades.

1. Se dirigen a Creación de entradas, seleccionan Editar páginas y crean una nueva página.
2. Hacen clic en Edición de HTML y agregan lo siguiente

<link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/rincondelrecursoweb/home/indice.js"> </script> 
<script src="http://ELNOMBREDESUBLOG.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script> 

3. Deben cambiar el texto ELNOMBREDESUBLOG por la dirección de su blog
4. Publican la nueva pagina y el indice se cargara automaticamente llenándose con las etiquetas y títulos de todas las entradas.

Para hacer cualquier cambio o ajuste de presentación para sus propios blog agregan esto después de

<link href="http://sites.google.com/site/rincondelrecursoweb/home/indice.css" media="screen" rel="stylesheet" type="text/css"></link>

<style type="text/css">
.gfg-root { /*Box containing index*/
/*Para cambiar la forma en la que se ve la caja*/
}
.gfg-title { /*Title of the box*/
}
.gfg-title a {
}
.gfg-subtitle { /*The Labels of blog*/
/*Esta es la forma en las que se ven las etiquetas*/
}
.gfg-subtitle a {
/*Color de la etiqueta*/
}
.gfg-entry { /*Inner box*/
/*Diseño de la caja en la que van los titulos*/
}
.gfg-list a{
/*Color y estilo del título de las entradas*/
}
.gfg-listentry {
/*Alineación de los títulos*/
}
.gfg-listentry-odd {
/*Color de fondo del primer titulo*/
}
.gfg-listentry-even {
/*Color de fondo del título siguiente*/
}
</style>

Es necesario saber un poquito sobre css pero en la web existen lugares que nos pueden dar solución a nuestras preguntas sobre ese tema.