Tabla de contenido (Sitemap)

Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica accediendo a las etiquetas del blog y sus respectivas entradas publicadas.

Ya hemos visto ¿Cómo agregar un sitemap automático?, pero este en particular esta ordenado por fecha de publicación y me gusta la forma como está organizado todo, teniendo un diseño que incluye varias opciones que lo hacen más completo.

<div id="bp_toc">
Cargando Sitemap. Por favor esperé....</div>
<script src="https://sites.google.com/site/cosaspablog/home/sitemap-tabla1.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div>

Para personalizarlo pegar el siguiente código CSS debajo

<style type="text/css">
#bp_toc {
border:1px solid #f5f5f5;
background:#ffffff;
padding:5px;
width:90%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #16a085 ;
color:#000000;
padding-left:5px;
width:250px;
font-weight: bold;
}
.toc-header-col2 {/*titulo fecha*/
width:75px;
background:#5588aa;
} .toc-header-col3 {/*titulo etiqueta*/
width:125px;
background: #eeb077;
}
.toc-header-col1 a:link, .toc-header-col2 a:link, .toc-header-col3 a:link{/*titulos*/
color:#eee;
font-size:14px;
}
.toc-header-col1 a:visited, .toc-header-col2 a:visited, .toc-header-col3 a:visited {
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
font-size:12px;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left:5px;
font-family: 'Niconne', cursive;
font-size: 14px;
color: #000;
background:#edf1ec;
text-transform: uppercase;
}
</style>

El resultado es este