Cómo crear un índice de posts - parte I


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
<table style="font-family: arial; font-size: 9px; letter-spacing: 1px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<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>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
índice de 4 columnas
<table style="font-family: arial; font-size: 9px; letter-spacing: 1px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<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>
<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
Megapack
más info
75€
Pack diseña tu orden
más info
38€
Pack emprendedor
más info
65€
Pack profes fetén
más info
45€
Pack diseña tu papelería
más info
38€
Pack estudiante Cum Laude
más info
35€
Curso diseña tu agenda
más info
28€
Curso papelería organizar papelería para organizar
más info
17€
Curso imagen corporativa
más info
50€
Curso tus apuntes flamantes
más info
18,50€
Curso diseños para el trabajo
más info
25€
Curso material docente
más info
18€
curso diseño de packaging
más info
17€
recurso Las 41 plantillas word
más info
4,5€
clase Diseña líneas del tiempo
más info
7,99€
clase Programaciones y unidades didácticas
más info
9€
clase Diseña papelería de navidad
más info
11€

clase Cuenta vuestra historia en una línea del tiempo.
más info
3,99€

clase Diseño de árboles genealógicos
más info
3,99€
clase Diseña catálogos de productos y servicios, manuales, guías, ebooks y cursos online
más info
11,99€
Ver todos los cursos


La newsletter
Suscríbete a la newsletter, más conocida como cartica y descubre un poco de todo: novedades, mi vida, mis desahogos, las miserias de la vida, ofertas y promociones especiales, etc. No hay una fecha concreta, la envío cuando me brota, cuando tengo algo que contar.

Tus datos serán tratados de acuerdo a la política de privacidad,. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com

Compártelo

Otros posts intersantes: