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 </head>, 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:
<table align="center"><tbody><tr style="margin: 0px auto; text-align: center;"><td><div id="toc"></div><div id="toclink"><a href="javascript:showToc();" id="imgTocLink">CLICK PARA DESPLEGAR INDICE</a></div><script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=500&callback=loadtoc"></script><script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=loadtoc"></script></td></tr></tbody></table>
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.
<a href="URL_POST_INDICE">INDICE</a>
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 ]]></b:skin> 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;
}
#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;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Me acuerdo que yo en su día lo probé y me daba error pero supuse que sería por el tema del Feed (loo intenté en el privado). Probaré este a ver si tengo más suerte, pero esta vez en uno público.
ResponderEliminarGracias como siempre por estar tan atento a todo y buscar soluciones a nuestros problemillas con nuestros blogs.
Probado, pero me gusta mas el estilo Site Map ^^
ResponderEliminarA mí también me gusta más, Sonia, pero esto depende del diseño y del gusto de cada uno. De todas formas, así ya hay una opción más.
ResponderEliminarHola Oloman,
ResponderEliminar¿cómo se controla para dividir en tres partes la imágen del "resaltar"?.
Es decir, que tenga una cabecera, una parte que se repite cuánto más texto tenga y un 'footer'.
( cómo por ejemplo si fuera un post-it ) Grácias
Hola Oloman, al pegar el código de la entrada y publicarla, sale este mensaje "Su HTML no es aceptable: Closing tag has no matching opening tag: SPAN". Revisé si era un problema de copypaste, pero no. trato de ignorar el error y al publicar la entrada el índice no funciona. Te agradeceria tu ayuda. Lo instalé en este blog:http://normatividadpenal.blogspot.com/
ResponderEliminarMercier, he perdido el hilo de la conversación en la que hablábamos de "resaltar", pero a ver si fuera esto lo que buscas.
ResponderEliminarJeramon, en cuento tenga un rato lo compruebo... otra vez; aunque parece que Sonia lo instaló sin problemas.
Jeramon, por lo que he visto, en el código que corresponde a la entrada, no has sustituido NOMBRE_BLOG por el tuyo. Por otra parte, no hay ningún SPAN en dicho código que pueda producir el error que comentas. Eso quiere decir que alguno has puesto o se ha puesto automáticamente sin necesidad.
ResponderEliminarActualizo la entrada para que no les pase a otros.
Parece que existía algún SPAN que se generaba automáticamente, ya se arregló. Muchas gracias
ResponderEliminarOloman, antes que nada, agradecerte porque tu blog me a ayudado mucho, soy adicto a los trucos.
ResponderEliminarLo que pasa es que te tengo una consulta, si yo tengo elementos en el crosscol. cada vez que aiga una entrada individual ¿Habra forma de poderlos desaparecer? y que solo aparezca la entrada y la sidebar, que los elementos del crosscol ya no se vean, que solo se vean en la pagina de inicio.
Al principio crei que se podia hacer con las condiciales, pero no entendi muy bien el tema...no se si puedas ayudarme.
Saludos y gracias.....
Javier, lo que tienes son gadgets incorporados a tu crosscol. En la entrada sobre las condiciones, viene precisamente un ejemplo (2ª código) de cómo configurar un gadget para que sólo se vea en páginas de entradas. Sólo habria que cambiar el == por un != para conseguir el efecto contrario. Tendrías que aplicarlo en cada uno de los gadgets que no quieres que aparezcan en páginas individuales.
ResponderEliminar2 preguntas en 1: ¿funciona el índice en blogs que están restringidos para el autor, es decir, no son públicos? ¿si ello es así, pasa lo mismo con el truco de "entradas relacionadas"? Lo pregunto porque realizo los mismos pasos para estos trucos en dos blogs y solo funcionan en el público. Se puede hacer algo? Gracias de antemano
ResponderEliminarTú mismo lo has podido comprobar. Todos los gadgets basados en el feed, como es este y el de las entradas relacionadas, no funcionan en los blogs privados.
ResponderEliminarEn cierta forma es lo lógico: Si no quiero que se vea mi contenido de manera masiva, tampoco mi fuente debería estar disponible para todo el mundo. En el momento que la fuente no es accesible, este tipo de scripts no funcionan.
Esta es la dirección de la fuente usada en este caso: http://NOMBRE_BLOG.blogspot.com/feeds/posts/default
¡Por fin lo conseguí! Gracias ^^
ResponderEliminarJe, je. Lo acabo de ver, Laura. Quizás deberías quitarle ancho a la columna de las etiquetas en favor de la columna de los títulos.
ResponderEliminarHola Capo: Gracias por la recomendacion, hace rato queria ponerlo en mi blog pero note que no funcionaba muy bien. Ahora me convence más! jaja :D
ResponderEliminarSolo queria hacerte una consulta, el que yo utilice feedburner para los feeds no ocacionaria algún drama?
Saludos y que sigas bien
Echa un vistazo unos posts atrás a otro sistema parecido pero por categorías. Puede que todavía te guste más.
ResponderEliminarSobre lo de usar feedburner en combinación con este gadget, no creo que haya el menor problema. Yo tengo ambos desde hace tiempo.
Ya lo coloque y funciona de 10!
ResponderEliminarGracias de nuevo.
Saludos ;)
Gracias por el consejo! Me pondré a ello ^^
ResponderEliminarMmm, he intentado hacerlo copiando el segundo script, pero se me cambia el estilo del índice, incluso me sale cortado y no aparecen las etiquetas. ¿Habría alguna manera de modificar el ancho de columnas y que se quede el estilo del índice tal y como lo tengo ahora?
ResponderEliminarTienes que cambiar el width de las siguientes clases, siempre respetando que en total no sumen más que el ancho general que está en #toc:
ResponderEliminar.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;
}
Una vez más, y van ..., gracias por la idea y por el código. Funciona perfectamente.
ResponderEliminarEsto último que que comentáis (a mi me pasaba también) lo he solucionado de otra manera. He alojado la entrada de índice en otro blog nuevo con esa entrada única. En este nuevo blog he seleccionado la plantilla básica que permite transformar los anchos de columna a % en lugar de píxel y he modificado los anchos del aspecto del índice también a %. Así aparece completo, al menos desde las configuraciones en las que lo he podido probar.
Saludos.
Lo de los porcentajes es la mejor opción, sobre todo en plantillas de ancho variable como la que has montado.
ResponderEliminar¡631 posts! Ya casi te alcanzo :) Un saludo.
Nada, no hay manera, intento cambiar las cantidades pero me salen las tablas cortadas, el texto no está centrado... seguiré intentándolo cuando tenga menos sueño. ¡Gracias de todas formas! ^^
ResponderEliminarQué tal Oloman.
ResponderEliminarEn primer lugar, me da un error por el que IE no puede abrir la página. Y una duda ¿que url tengo que introducir la de la entrada o la que debería mostrarme IE?.
Habría forma de integrar un boton indice en la descripción del blog?. Imagino que ya lo habrás explicado.
Gracias.
ofo1965, dónde pone NOMBRE_BLOG, es para poner la página principal de tu blog. Dónde pone URL_POST_INDICE, hay que poner la dirección de la página que creaste para ver el índice.
ResponderEliminarSobre lo del boton en la descripción del blog, se crea igual que se indica aquí (<a href="URL_POST_INDICE">INDICE</a>) pero colocando una imagen (botón) en lugar de la palabra INDICE. Ese código lo puedes poner en cualquier parte. Si lo quieres en la cabecera, pues en la cabecera.
Creo que lo tengo todo, teoricamente bien, el pero es, que me sigue dando el mensaje de error al abrir la tabla.
ResponderEliminarGracias de nuevo Oloman.
Contestación muy rápida por tú parte gracias.
Si pudieras concretar un poco más lo que hiciste y qué error te da...
ResponderEliminarmuchisimas gracias, enserio por el tipo de plantilla que utilizo y por ser unica en su genero me habia costado modificarla de otra forma vista en los blogs, y hoy despues de leer tantos tutoriales me funciono ala perfeccion en el diseño de plantilla de buythemes santo setty.....
ResponderEliminarte agradesco
Me pregunto si podría ser usado este script para una navegación completa entre los post sustituyendo el bucle orginal de blogger y así hacer más rápido el cambio de página entre múltiples post.
ResponderEliminarEl bucle original yo creo que no te lo puedes cargar, porque es el que va cogiendo de la base de datos de Blogger los idem necesarios para ir mostrando el contenido de las distintas entradas (<data:post.body>), en función del tipo de página en el que estemos.
ResponderEliminarNo estoy seguro, pero quizás te refieras a la página Inicio. Mostrar el índice en lugar de mostrar los últimos posts publicados. En ese caso, es una opción, pero no creo que tarde menos. De hecho, este script carga TODOS los post para extraer su título y URL.
Sin embargo, si te refieres a que encontrar una entrada concreta se hace más rápido, seguro que sí, pero para ir de página a página, tendríamos que volver siempre a Inicio.
Sakudos, colo acotar que en la parte del codigo max results, controlamos el numero de entradas que queremos tener
ResponderEliminar.........;max-results=1500&callback=loadtoc">.....
en mi caso menciono 1500, pero puede ser mucho mas o menos segun el caso
saludos
(PD: es mejor darle clases a cada parte de la tabla, es decir, <table class="tabla1"....
asi para cada parte que veamos necesario asi desde el panel de opcines avanzadas en blogger por ejemplo, solo anidamos nuestros propios diseños CSS
si a alguien le interesa el diseño con cascadas CSS se puede pasar a mi blog tb ^^ , de antemano gracias por el script
http://mnesick.blogspot.com/
Gracias por tu aportacion. Es lo que estaba buscando.
ResponderEliminarEduardo