Creative Mindly: Cómo crear un índice de posts

Muy buenas a todos. Como ya os comenté por Facebook, llevo varios días poniendo en orden el índice de posts de esta maravilloso (pero llenísimo de entradas) blog. Desde ya os digo que no es un índice que se vaya actualizando de forma automática (ojalá, pero no) sino que seremos nosotros quienes lo tengamos que actualizar poquito a poco. Actualizarlo, en sí, no nos va a costar mucho trabajo ni mucho tiempo. Pero sí que nos va a costar un rato crearlo. No es difícil, os lo prometo, pero sí que es laborioso, especialmente si tenéis un volumen de entradas descomunal como es mi caso. Pero bueno, lo podéis ir haciendo poco a poco, como he hecho yo. Pero creedme, tener un buen índice de posts es muy muy importante.

Hasta ahora, y de hecho todavía no lo he terminado de modificar, el índice de entradas de este blog consistía en distintas numeraciones por puntos con las entradas que he publicado. Es una forma muy legítima de organizar los posts, pero ya sabéis que lo mío no es estar quieta. Así que mi intención era hacer un índice más organizado y visual. Y esto es lo que os traigo.

Curso: mini web master

Si quieres aprender todo lo que sé sobre cómo crear un blog, web o una tienda online en blogger, te recomiendo este curso. Es muy completo y lo mantengo actualizado con novedades. Toda mi web está hecha siguiendo los pasos que te cuento aquí.

Quiero saber más sobre el curso

Clase

Diseño de ebooks, catálogos, manuales, guías y cursos online.

Curso

presentaciones

con power point

Pack

Pequeño gran emprendedor

Curso

diseña tu marca

personal

11,99€

22€

65€

50€

Por qué debo tener un índice

Esto debería ser obligatorio. Tener un índice de posts, especialmente si acabas de aterrizar en un blog, es estupendo para hacerte una idea del tipo de contenido que esa persona suele publicar. Así que, aunque no hagáis un índice siguiendo mis indicaciones, sí que os animo a que creéis uno. Así que echadle ganas, buscad raticos y poneos a crear un índice. Os va a merecer la pena seguro. Nada de perezas, hay que currar, especialmente si queremos que nuestro blog vaya mejorando.

qué vamos a aprender

En esta primera parte del índice vamos a crear los cuadritos con texto. Y podéis decir, va, paso de esta parte porque lo que yo quiero es que aparezcan imágenes. Si es así, pasa directamente al segundo tutorial pinchando aquí. Pero ahora nos vamos a centrar, solo en un índice con texto, como el que veis aquí abajo. Lo complicado no es hacer el índice, para nada, sino pensar en las secciones, ordenar, enlazar, etc. Tardaréis un rato, pero merecerá la pena. Yo os recomiendo que el índice lo hagáis en una página independiente de vuestro blog.

Antes de empezar

Antes de ver el vídeo y comenzar a crear nuestro índice es muy muy importante que pensemos en qué partes queremos dividir nuestro índice. Es decir, en ningún momento queremos que el índice se convierta en una maraña de información mezclada.

Queremos un índice organizado por secciones que permita al lector ver qué tipo de contenidos tenemos y, así, pueda ir a la parte que más le interese. Así que el punto número uno sería elegir qué secciones tendrá nuestro índice. En segundo lugar debemos decidir qué entradas queremos meter en cada una de las secciones.

Puede ser que no queramos meter absolutamente todos los posts que hemos publicado hasta la fecha, sino que queremos que aparezcan los que más nos gustan, los más útiles, actuales, representativos. De hecho, en este proceso, yo he descartado algunos posts que ya no me gustaban o estaban desfasados. Estos todavía están publicados en mi blog, los podéis ver, pero no he querido que aparezcan en mi índice por que no me parecían relevantes ahora mismo.

1. Elegimos las secciones que queramos que tenga el blog
2. Decidimos las entradas que van a aparecer en el índice
3. Comenzamos con el tutorial
4. Si quieres poner imágenes en tu índice pasa por este post

Aprende a crear una web o un blog más profesional y responsive

Una vez que hayamos tomado estas decisiones ya estamos listos para comenzar con el tutorial. Como os repito (seguramente que más veces que las debidas) la primera vez que hagamos el índice nos va a llevar tiempo, esto es así. Pero después, una vez que lo tengamos montado, además de sentirnos muy bien al tener toda la información organizada, actualizarlo va a ser coser y cantar. De hecho, también os voy a explicar cómo se actualiza el índice (que no tiene ningún misterio).

El tutorial

Aquí tenéis el código que vamos a necesitar para crear nuestro índice. Como siempre, que no haya ataques epilépticos ni histeria colectiva al ver el código, tanto el el vídeo, como ahora mismo, os voy a explicar un poquito en qué consiste para que sepáis qué partes podéis tocar y cuáles no.

Una vez que hayáis decidido el número de columnas que queréis, tres o cuatro, copiad ese código, el que corresponda y pegadlo en un documento word o en cualquier otro programa de texto. Es ahí donde haréis las modificaciones que vosotros queráis: tamaños, colores, etc. Y después, guardad ese documento, para tenerlo a mano. Como os digo en este tipo de índice no pondría más de 4 columnas ni menos de tres. Así que aquí tenéis el código para las dos opciones:

Ir a la segunda parte

índice de 3 columnas

<tr>

<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>

<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>

</tr>

</tbody></table>

índice de 4 columnas

<tr>

<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>

<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>

</tr>

</tbody></table>

Explicación del código

Como podréis ver el índice es muy sencillo: texto no muy grande, en letras mayúsculas, una línea en el borde y chinpún. Sin fondos ni nada, todo muy sencillo (que yo creo que es la mejor opción). Aunque en el vídeo os lo explico os comento un poquito:

En color rojo: el tipo de letra. Yo creo que la Arial quedará bien en cualquier blog, queremos que se vea, no una tipografía con mil historias.

El color verde: es el tamaño de la tipografía. En este caso la he puesto en un tamaño 11, suficiente para que se vea bien.

El color azul: es el espacio entre las letras. Si no queréis espacio poned un 0, si queréis menos espacio poned 1,2, etc.

El color naranja: es el ancho de la línea. Podéis aumentar el tamaño lo queráis, pero yo no pondría más de 3.

El color morado: es el color del borde. En este caso tiene un color gris, pero en esta página podéis elegir el color que más os guste.

El color amarillo: es el estilo de la línea. Solid significa línea sólida, sin puntos ni nada. Podéis cambiarlo por dashed (líneas) o dotted (puntitos).

Otros cursos para seguir trabajando