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. No sé si os habéis dado cuenta pero he quitado el puñetero Linkwithin que no hacía nada mas que dar por saco. Ni enseñaba entradas relacionadas ni nada, solo hacía lo que le venía en gana en cada momento. Así que lo quité.

Con esto no quiero decir que vosotros también tengáis que quitarlo, haced lo que queráis. Pero al quitarlo vi mucho más importante currarme un buen índice de posts para que, todos los nuevos y los antiguos (no quiero llamaros viejos) tengáis claro qué entradas y qué tipo de contenido podéis encontrar por aquí.

Así que ni corta ni perezosa me puse a trastear por aquí y por allá buscando un tutorial que me indicara cómo hacer un índice de posts tal y como yo lo tenía en la cabeza. No encontré nada. Así que al estilo Juan Palomo, me "inventé" un código (sí, como lo leéis) para conseguir hacer un índice como el que podéis ver aquí.

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.

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.

HACER INDICE DE POSTS 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.
elegimos las
secciones de tu blog
decidimos las entradas
de cada sección
seguimos
el tutorial
quiero un índice 
con imágenes
aprender a montar una 
tienda online en blogger
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:
í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>

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)
CURSOS PARA SABER MÁS
Megapack 5 cursosDISEÑA TU AGENDAPACK DISEÑA TU ORDENPACK EMPRENDEDOR
75 €
+INFO
28€
+INFO
38€
+INFO
52€
+INFO


DISEÑA PAPELERÍA PARA PLANIFICARTEPACK DISEÑA TU PAPELERÍADISEÑA
DISEÑA TU MARCA, TU BLOG Y BRANDING
MEGA PACK PARA ESTUDIANTES Y OPOSICIONES
17€
+INFO
38€
+INFO
35€
+INFO
75 €
+INFO

catálogo completo 
de cursos online

Y de momento esto es todo hasta el jueves. Espero que os pongáis ya mismo a trabajar y a crear vuestros índices, no os vais a arrepentir, fijo que no. Y espero que me vayáis poniendo los links de vuestros íindices (por lo menos empezados) en el cartelito que compartiré en facebook. Si veo que trabajáis publicaré la siguiente entrada. No quiero hacerlo hasta que no os pongáis con esto, para que no os agobiéis y paséis de hacerlo. 

Así que, en cuanto saquéis un ratico, ¡¡a currar!!
Un besazo majos


N E W S L E T T E R


NO TE VAYAS SIN DESCARGAR 
EL EBOOK GRATIS PARA EMPEZAR A DISEÑAR

SI TE HA GUSTADO ¡COMPÁRTELO!


Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: