Los seguidores de nuestro blog suelen leer al día los artículos que les interesan, pero también tenemos lectores que no son asiduos y que pueden estar interesados en tener una idea general de que es lo que hemos escrito en nuestro blog. Para ello lo mejor es usar un Indice de Contenidos, que en ingles se abrevia como TOC (Table Of Contents). Estas listas de contenidos se basan en Javascript y en Blogger normalmente se colocan en una de las páginas estáticas a las que puedes acceder desde el menú superior. De esa forma con un sólo clic permiten a los usuarios ver una lista de todo lo que has escrito hasta el momento, o si lo prefieres de los últimos artículos. Hay que aclarar que como las traducciones son un poco libres y algunas personas también hablan de los índices de contenidos como sitemaps o tablas de contenido (es la traducción literal, pero no me gusta la confusión que supone decir que es una tabla). La idea en este artículo es que aprendas los elementos que componen los Indices de Contenidos y como puedes insertarlos en Blogger.Partes de un Índice de Contenidos.
Un índice de contenidos de Blogger está compuesto por tres partes: un programa de Javascript, un código HTML y el CSS para darle formato, aunque esta última la podemos obviar.1. El código HTML. Esta es la parte que tenemos que insertar en un página estática de nuestro blog. Esta compuesto por 2 etiquetas script.
- La primera etiqueta script (azul oscuro) lo que hace es activar el programa de Javascript, que es un archivo .js y que tiene que estar alojado en una página Web externa a Blogger. En el ejemplo que tienes abajo la dirección son las letras que tienes en rojo.
- La segunda etiqueta script (en azul clarito) es el que indica el blog del que vamos a hacer el índice. Como podrás ver en naranja tienes la dirección del feed de este blog.
El proceso es muy sencillo.
- Copiar el código.
- Abres el lugar donde vas a insertarlo.
- Pegas.
- Cambias la URL del feed, por la de tu propio blog.
- Guardas, y ya tendría que funcionar.
2. El código Javascript. Es la parte que tiene las instrucciones de lo que tiene que mostrarse en pantalla y de como se van a ordenar los artículos. Aquí es la parte que determina si los artículos vas a estar ordenados de forma alfabética, clasificados por etiquetas o van a estar ordenador por fechas. Este código Javascript puede estar en un archivo externo o dentro del código HTML.
- Javascript externo. Es como en el ejemplo de arriba. El primer script estará apuntando a un archivo JS, que es el archivo de Javascript. Es la forma más elegante y clara de proceder, pero tiene algun inconveniente. El problema más usual es que el Javascript externo esté alojado en la página de otra persona, de forma que si algún día esa persona elimina o modifica el programa también afectará el índice de contenidos de tu blog. Por ello nuestro consejo es que si es posible el archivo JS lo subas a un dominio tuyo. La ventaja de un archivo externo es que si tienes varios blogs, sólo tendrás que hacer las modificaciones una sola vez para todos.
- Javascript interno. El código va dentro del blog dentro de la plantilla, situado en la cabecera. Es decir, antes de la etiqueta </head>. Si se realiza así, entonces hay que quitar el primer código Script y dejar sólo el segundo, tal y como puedes ver a continuación.
3. El código CSS. Este es un elemento accesorio, y nos podemos encontrar algunas tablas de contenido que no tienen ningún CSS asignado. Esté código sirve para definir el aspecto de la tabla de contenidos, colocándole un color de fondo, un tipo de letra determinado, márgenes, sangrado... Requiere usar un identificador en el código HTML, como por ejemplo el texto que se ha añadido en verde.
Diferentes Tablas de Contenidos (TOS) para Blogger.
1. Tabla de Contenido por fecha. Este artículo es de Ciudad Blogger. El índice no tiene código CSS y el Javascript es interno, se incrusta en la plantilla.2A. Tabla de Contenido clasificado por etiquetas. Seguimos en el blog Ciudad Blogger, pero ahora la Tabla de Contenido que nos presentan lo que hace es classificar las diferentes entradas por etiquetas. Las etiquetas siguen un orden ascendente, empezando por los símbolos, luego los números`del 1 al 0, y por último las letras. La información me llega vía Ciudad Blogger, aunque el creador del código es de Abu Farhan. No tiene código CSS y el Javascript es externo.
2B. Tabla de Contenidos clasificado por etiquetas B. Es el mismo TOC que antes, pero la versión de Vagabundia viene con dos diferencias notables. La primera es que incluye códigos CSS con selectores. La segunda es que ahora el Javascript es externo. En el Balcón de Jaime encontramos el mismo modelo, pero con los códigos de CSS y Javascript externos. Una de las características especiales es que es capaz de detectar las 10 últimas entradas y te las marca con un mensaje de color rojo, que dice: Nuevo!
3. Tabla de Contenido clasificados por etiquetas en acordeón (¿menús desplegables?). Si se refiere a menús desplegables resulta una mejora muy interesante para aquellos que tenemos una gran cantidad de etiquetas en el blog, el único problema es que al probarlo no he visto el efecto. Está basado en el desarrollo de Abu Farhan, pero el código HTML es más largo, incluye un tercer Script que es el que se supone que crea el efecto acordeón. Tiene los códigos Javascript externos y el CSS fuera, así que no vemos los selectores.
4. Tabla de Contenidos por etiquetas y con fechas. Lo más interesante de este artículo de AreaTIC es que el autor ha personalizado el Javascript del TOC nº2, y nos muestra el archivo Javascript que ha conseguido. Las diferencias que consigue es mostrar la fecha y hacer que el mensaje de Nuevo! aparezca delante y no detrás. No tienen CSS y el Javascript en principio es interno, aunque como tienes el código lo puedes subir también como un archivo JS.
5. Tabla de Contenido para gadgets multiventana. Esta vez el artículo está en inglés y nos muestra como insertar una tabla de contenidos en un gadget multipestaña.
6. Tabla de Contenido preciosa con CSS y 7 selectores. Este es el que uso en Blog en Internet (al menos de momento). A nivel de programación no aporta nada especial. El Javascript es externo y no podemos verlo, pero parece ser el mismo que el que propone Abu Farhan. Lo interesante es el código CSS, que se muestra dentro de la etiqueta Style de HTML, pero te recomendamos pegarlo en la sección de CSS de la plantilla para que cargue mejor el blog. El aspecto con degradados, bordes y diferentes tonalidades de azul es muy bonito.
Personalizar un índice de contenido para Blogger
Por último vamos a explicar los cambios que puedes realizar sobre un Índice de contenidos, que como podrás imaginarte se dividen en tres grupos.- Personalización del código CSS. Sirve para cambiar el aspecto de la tabla, permitiendo cambiar el estilo de los textos, su color, el fondo de los datos que se presentan... no es complejo y lo explicaré en detalle en otro artículo.
- Personalización del código Javascript. La verdad es que ni idea, de momento este tipo de lenguaje no lo entiendo y tampoco he encontrado ningún artículo que os pueda servir de referencia.
- Personalización del código HTML. Sirve para modificar las fuentes de información y la cantidad de información. También para añadir otros Javascripts, como por ejemplo el que crea el efecto acordeón. El único cambio que he visto que se pueda hacer es incrementar o bajar la cantidad de artículos que vas a mostrar en el índice de contenido. Fijate que después de la línea naranja hay un signo de interrogación, y enseguida la propiedad "max-results=3", eso es porque el código de arriba sólo muestra un máximo de 3 artículos (los 3 últimos). Pero aquí puedes añadir números tan grande como desees y por defecto la mayoría ponen "max-results=9999" para que salgan todas las entradas.
Imágenes. propias.
0 comentarios:
Publicar un comentario