Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Tabla de contenido o índice para tu blog por etiquetas

Al publicar el truco para crear una tabla de contenido o índice en el blog recibí consultas que pedían algo similar pero que involucrase etiquetas, de manera que los artículos se agrupasen en sus correspondientes categorías.

Se trata de un script ideado por Abu Farhan, útil y de sencilla instalación, que no solo separa cada post sino que además resalta las entradas recientes con un texto que dice 'Nuevo!' al final del título.

Es un truco recomendable ya que, junto con el anterior, ofrece a los lectores la posibibilidad de encontrar fácilmente cualquier cosa que haya sido publicada.

Para instalarlo necesitas el siguiente código:

<script style="text/javascript" src="http://sites.google.com/site/scriptsbalcon/b/blindicetik.js"></script>
<script src="http://TITULO.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Crea una nueva entrada e introdúcelo en ella (en el modo 'Edición de HTML', no en 'Redactar').

Ahora tan solo necesitas incluir el título de tu blog en el lugar indicado con color naranja (sin el .blogspot.com) y listo.

En caso de querer instalar el mismo índice pero con colores y ciertas modificaciones, utiliza este otro código:

<link rel="stylesheet" href="http://sites.google.com/site/scriptsbalcon/b/blindicetik.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://sites.google.com/site/scriptsbalcon/b/blindicetik"></script>

<script src="http://TITULO.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Obtendrás algo como lo que muestro en esta imagen:


Nota:
- Si lo deseas puedes descargar el primer script para alojarlo por tu cuenta y utilizarlo únicamente en tu blog (el índice cargará a mayor velocidad). Una vez alojado, reemplaza la dirección que indico en color gris con la nueva.

CHiCken dice...

muy bueno, ahora ya hay uno nuevo con jquery, hace poco yo lo publique en mi sitio :D

http://myestilodeyo.blogspot.com/2010/07/tablas-de-contenidos-para-blogger.html

Camino Ninja dice...

Hola Jaime, este script me cayó como del cielo ^^, justo aplicaba a mi web un directorio.

Quisiera saber si es posible modificar el código para mostrar etiquetas específicas.

Espero tu pronta respuesta =) ah! y por cierto, buen blog!

Camino Ninja dice...

aa y tb saber si se puede modificar la cantidad de post a mostrar. gracias!

Driwrgy dice...

Para esto necesitaría cambiar la configuración de mi equipo, ya que por mi problema de visión, utilizo la configuración en alto contraste de vista, que me facilita la lectura (ya que me resulta mucho más cómodo leer sobre fondo oscuro, con textos en tonos claros que hagan contraste y resalten)pero no respeta colores... Gracias de todas formas, trataré de ponerlo en práctica, a vre qué tal se me da. Besos.

Mariona Monrós dice...

La idea es genial!

solo que con tu script me da error al cargarse la pagina, i no consigo abrir este documento javascript..

bueno, seguiré probando!

Jaime Trujillo Escobedo dice...

Muchas gracias por compartirlo, CHiCken! Es probable que más adelante lo publique (al menos el índice con 'acordeón').

Jaime Trujillo Escobedo dice...

Camino Ninja, me temo que lo que pides es algo muy complicado. Habría que editar a fondo el script original.

Jaime Trujillo Escobedo dice...

Driwrgy, voy a editar la entrada de manera que el script tenga su propio CSS (propiedades de estilo) y poder así personalizar el color de fondo.

Jaime Trujillo Escobedo dice...

Mariona Monrós, ¿Qué dice el error? Voy a editar la entrada por lo que pronto podrás volver a intentar la instalación.

Paco Muñoz dice...

Jaime va estupendamente. Lo que no entiendo es la diferenciación de colores a mi me salen unos artículos en azul otros en rojo. He comprobado si es la utilización y me parece que no. Por curiosidad se podría saber por qué es así. Luego está el orden que sigue el índice no es alfabético.

Jaime Trujillo Escobedo dice...

Paco, necesito saber la dirección en la que has instalado el índice o tabla de contenido, la entrada.

Ante lo que me comentas, lo más probable es que se deba a la configuración global de los enlaces en la plantilla y dado que este índice se compone únicamente de enlaces, éstos aportan las mismas propiedades (colores, fuente, tamaño...).

Pero tranquilo, podrás editarlo a tu gusto.

La tabla de contenido que presento en esta entrada, como bien dices, no muestra los artículos por orden alfabético. Si deseas un índice que cumpla con dicha herramienta accede a este otro tutorial.

Universo_Z dice...

Esto es sin dudas de lo mejor, se agradece

Jaime Trujillo Escobedo dice...

Me alegra que te guste, Universo_Z.

Celia dice...

Hola Jaime: En primer lugar quiero felicitarte por los excelentes consejos que nos da para poder mejorar nuestros blog y por compartir con los demás todo lo que sabes. Yo soy relativamente nueva en esto, solo llevo desde abril, pero me enganchado y ya llevo 3 blogs (2 propios y otro para mi marido) y voy a por el 4º para una asociación sin ánimo de lucro.
He puesto en práctica algunos de ellos y me han quedado muy bien, como son los menús horizontales, la calabaza, los seguidores de Facebook, un formulario, etc, etc., También puse en práctica este del índice de contenidos y me funcionó perfectamente, pero ahora ya no me sale. No sé si será porque me cambié a un dominio propio o qué. En la dirección del blog le puse la actual, pero sigo sin visualizar su contenido ¿podrías ayudarme? es que me gustó mucho como quedaba y la otra opción de por fecha me seduce menos, aunque también la tengo instalada. Gracias de antemano.
Un saludo
Celia

Jaime Trujillo Escobedo dice...

¡Hola Celia! En primer lugar me gustaría agradecerte el comentario. Es un gusto saber que El Balcón ayuda tanto a personalizar los blogs.

Con respecto al índice, debo decirte que no eres la primera persona a la que le pasa. Recibí hace poco una consulta muy parecida a la tuya.

Por el momento te daré una solución: Vuelve a incluir el código en la entrada (en modo Edición de HTML -no en Redactar-) y prueba con ambas direcciones del blog -la antigua y la del dominio propio-.

Si sigue sin funcionar procederemos a comprobar el Feed del sitio. ¿Has cambiado la configuración de los feeds?
¡Saludos!

Laube dice...

A ver Jaime, que me estoy liando con lo de las etiquetas, los índices, etc....
Vamos a ver...

1) Si creo un índice tal cual lo explicas aquí, mis lectores dónde lo podrán localizar en el blog?. Tengo que tener primero implementado el truco de las pestañas o tabs?.

2)Relacionando este tema con las pestañas, siempre he de crear el contenido en una gadget javascript?. O sea, que ese contenido es el que se verá al pinchar en las pestañas?. Y cómo hago coincidir la pestaña con el gadget?. Esto no lo llego a entender... Lo arrastro?. Ayyy, madre, qué jaleo tengo.

Jaime Trujillo Escobedo dice...

Laube, respondiendo a tus dudas...

1) Al crear el índice tal y como se explica en este post configurarás una entrada cualquiera para que en lugar de mostrar texto presente una lista con los títulos de tus artículos.

2) Para que los lectores de tu blog puedan acceder al índice, bastará con vincular la entrada desde la barra lateral del blog, utilizando un elemento de página html-javascript (en este tutorial explico detenidamente cómo crear un link).

Avísame en caso de necesitar más ayuda.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo