En su momento se explicó cómo construir un índice interactivo que incluía una relación completa de nuestros posts, ordenada por títulos y que además permitía reordenar por ese mismo parámetro, por fecha o incluso aplicar un filtro por etiquetas.
Laura nos hacía ver hace unos días, que el código facilitado entonces no funcionaba ahora. Como cada vez se "pierden" más scripts y de los sitios de alojamiento no se puede uno terminar de fiar, he decidido salvarlo en Google Docs como fichero de texto y este sería el enlace para aquel que lo necesite.
Os recuerdo la forma de implantarlo en la propia plantilla para no depender de servicios externos.
En primer lugar, antes del , insertamos todo el código del fichero txt y que se corresponde con el script bloctoc.js de Beautiful Beta. He aprovechado para traducirlo al castellano.
Guardamos los cambios en la plantilla y ahora creamos una Nueva Entrada (con fecha atrasada mejor) y allí copiamos esto otro:
NOMBRE_BLOG tiene que ser sustituido por el nombre que lleva la dirección de vuestro blog. Si copiais todo excepto lo que está en gris, teneis para mostrar hasta 500 entradas. Con el código en gris llegareis hasta 1000. Siguiendo el mismo esquema se puede ampliar esta cifra, como podeis ver en este ejemplo dónde se muestra el índice de un blog con más de 1.500 entradas publicadas.
En Opciones de Entrada podeis seleccionar la opción de No permitir comentarios si así lo quereis y ya Publicamos la entrada que formará nuestro índice. Podeis verla y comprobar que funciona.
Por último, copiamos la dirección del nuevo post y con ella creamos un enlace con el rótulo INDICE y/o un dibujo alusivo (en la barra lateral, en la cabecera... dónde apetezca). Si no hacemos esto, será difícil que alguien sepa que tenemos un índice.
Para redondear la faena, sólo nos falta crear el estilo de nuestra tabla de contenidos para que salga con nuestro propio diseño. Estas son las clases que controlan toda la tabla. Habrá que insertar este código antes del ]]> y después cambiar los valores con los colores, anchos, separaciones, etc. que queramos.
/* ESTILO INDICE ENTRADAS */
#toc {
border: 0px solid #990000;
background: #ffffff;
padding: 5px;
width:700px;
margin-top:9px;
text-align:center;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #990000;
color: #000000;
width:320px;
text-align:left;
font-size:12px;
}
.toc-header-col2 {
width:100px;
}
.toc-header-col3 {
width:280px;
}
.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 {
text-decoration:none;
color:#cccccc;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
color:#000000;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3, .toc-entry-col1 a:link, .toc-entry-col2 a:link, .toc-entry-col3 a:link {
padding-left: 5px;
text-align:left;
color:#990000;
font-size:12px;
}
.toc-entry-col1 a:visited, .toc-entry-col2 a:visited, .toc-entry-col3 a:visited {
text-align:left;
color:#000000;
font-size:10px;
padding-left: 5px;
}
Publicar un comentario