En uno de mis blogs ya tenía tantas etiquetas como para resultar antiestético. Por eso he seleccionado unas pocas etiquetas en lugar de mostrarlas todas. Esto se puede hacer en Diseño, editar el gadget Etiquetas.
Pero entonces ¿como mostrar todas las etiquetas que hay en todas las entradas? Es muy importante facilitar la navegación. La solución ha venido de la mano de Oloblogger. He creado un índice automático y lo he ajustado al estilo de mis páginas.
Para no retardar la carga de la página he incrustado esta opción en una entrada con fecha muy antigua. Así solo si lo vas a usar esperas el tiempo que le cueste crear los índices. En edición de HTML de la entrada copiar el código siguiente:
* Pincha en las cabeceras de las columnas para ordenar (ascendente/descendente).
* Elije cualquier etiqueta para filtrar por esa categoría en concreto.
* Pasando el puntero por encima del título de un post, te aparecerá un sumario de su contenido.
*Pincha en la entrada que te interese para acceder directamente a ella.
<table align="center"><tbody>
<tr><td><div id="toc">
</div>
<div id="toclink">
<a href="javascript:showToc();" id="imgTocLink">DESPLEGAR EL INDICE INTERACTIVO DE ENTRADAS</a></div>
<script src="TuALOJAMIENTO/blogtoc_esp.js">
</script>
<script src="http://TuBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=500&callback=loadtoc">
</script>
<script src="http://TuBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=loadtoc">
</script></td></tr>
</tbody></table>
No hay que olvidar cambiar TuBLOG y TuALOJAMIENTO por lo que corresponda y subir el fichero blogtoc_esp.js a tu almacén.
Ahora vamos a guardar el formato CSS correspondiente. En Diseño, Edición de HTML, copiar el siguiente código entre las etiquetas <head> y </head>.
<!-- INDICE AUTOMATICO -->
<style type='text/css'>
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:600px;
margin-top:10px;}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:275px;}
.toc-header-col2 {
width:75px;}
.toc-header-col3 {
width:200px;}
.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:90%;
text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
padding-left: 5px;
font-size:90%;}
</style>
Luego lo puedes ajustar a tu diseño de página. Lo he basado en el que hay en Beatiful Beta.
Por último tienes que poner en la página principal un enlace directo a esta entrada. Yo he elegido un botón input en combinación con otros que ya tenía.
<a href="http://TuBLOG.blogspot.com/TuEntradaINDICE.html" onclick="location='http://TuBLOG.blogspot.com/TuEntradaINDICE.html'" title="Indice interactivo de entradas"><input value="Indice de entradas" name="btnI" type="submit" /></a>
Todo listo para funcionar.
