La verdad es que después de mucho buscar, sólo he encontrado un sistema bueno en Beautiful Beta, publicado hace ya ¡17 meses! y, cómo no, traducido y explicado hace tiempo por Rosa y J.Miur.
Más que bueno, es espectacularmente bueno, porque además de mostrar el contenido deseado, permite ordenar las entradas por el título del post, por su fecha e incluso filtrarlas por etiquetas (categorías).
Seguramente, lo mejor para no cargar mucho todas las páginas del blog, sea crer una entrada con fecha anterior e instalar allí todo el código. De esta manera, el SCRIPT sólo se ejecutará cuando se cargue esa página y no todas. Evidentemente, para que el usuario pueda acceder a esa página, habrá que poner algún botón, imagen o enlace de texto, que lleve allí. VER EJEMPLO.
Dicho esto, el código que habría que poner en la entrada sería este:
<table align="center"><tr><td><div id="toc"></div><div id="toclink"><a href="javascript:showToc();" id="imgTocLink">Indice de entradas</a></div><br />
<script src="http://b49dxw.bay.livefilestore.com/y1pVqzRsj2FLlbf6Z3LWGfxR2MxLDC6qcs8c_3yuog7Y9iBKV8dLmkRtMCiSlAoQ8P3MTQ5PY5sEKxW13lPSZ32vQ/blogtoc_esp.js"></script>
<script src="http://TUDIRECCION.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"/><br />
<script src="http://TUDIRECCION.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"/><br />
</td></tr></table>
Hay que sustituir TUDIRECCION por vuestra dirección. El fichero Javascript (.JS) que contiene el código principal, conviene que lo alojeis en vuestro propio servidor de ficheros para un acceso más rápido. Luego sustituis la dirección marcada por la vuestra. Si todos cargamos desde la misma dirección, la cosa o se ralentiza o se bloquea del todo. En este enlace podréis descargarlo.
Corrección:
* start-index es el número del post de inicio para empezar a mostrar resultados
* max-results indica el número máximo de post que extraerá el SCRIPT.
De esta manera, la parte marcada en gris, nos sacará los primeros 100 posts empezando desde el 1. La parte en negro nos extraerá los 100 segundos posts, comenzando desde el 101.
He hecho pruebas hasta max-results=500 y funciona correctamente. Así, si por ejemplo necesitais sacar hasta 1000 posts, sólo habría que sustituir 1 (start-index) y 100 (max-results) por 1 y 500 respectivamente en el SCRIPT gris. En el negro, 101 y 100 han de ser sustituidos por 501 y 500 respectivamente. En el ejemplo de antes se puede comprobar.
Ahoro sólo queda darle formato a la tabla para que salga como más os guste. Para ello hay que colocar después de la etiqueta <head> o justo antes de </head>, las siguientes clases CSS y entre los corchetes los atributos. Como Vagabundia lo ha redactado muy bien y no veo la forma de mejorar la explicación, lo copipasteo:
<style type="text/css">
#toc { /* es el bloque general */
[propiedades generales optativas: background-color, margin, etc]
padding: valor; /* es la separación entre el contenido y los bordes */
width : valor; /* podemos no colocarlo y será igual al ancho del área de posts */
}
.toc-note {
/* es el texto que aparece arriba indicando la cantidad de resultados */
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
/* son los títulos de las columnas */
}
.toc-header-col1 {width: valor;} /* ancho de la primera columna */
.toc-header-col2 {width: valor;} /* ancho de la segunda columna */
.toc-header-col3 {width: valor;} /* ancho de la tercera columna */
.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 {
/* propiedades de los enlaces en los títulos de las columnas */
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
/* propiedades para efecto mouseover en los títulos de las columnas */
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
/* propiedades del contenido de las columnas */
}
.toc-entry-col1 a, .toc-entry-col1 a:visited, .toc-entry-col1 a:link,
.toc-entry-col2 a, .toc-entry-col2 a:visited, .toc-entry-col2 a:link,
.toc-entry-col3 a, .toc-entry-col3 a:visited, .toc-entry-col3 a:link {
/* propiedades de los enlaces del contenido de las columnas */
}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover, {
/* propiedades para efecto mouseover del contenido de las columnas */
}
</style>
Al final de la entrada correspondiente de Beautiful Beta, podeis encontrar un ejemplo de formato ya relleno. Podeis copiarlo, ver como queda y luego modificar los valores de color, ancho, fondo, etc.
Existe otra manera de colocar el índice como un artilugio. Se trata de poner un enlace en la barra lateral que, al pincharlo, desplegará delante de la primera entrada todo el contenido de vuestro blog. El código es prácticamente el mismo y la forma de implantarlo está explicada en El escaparate de Rosa.
es este
<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.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:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>
Publicar un comentario