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

15 sept. 2015

hacer indice posts blog

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 DE POSTS?

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. Bueno, es tu decisión, pero yo no estaría muy de acuerdo. Y os explico mis razones. 

Al ser un índice tipo tabla las imágenes que podamos añadir no van a ser muy grandes (como veremos en el próximo tutorial) así que puede ser que en la imagen no se vea al 100% qué es lo que hemos hecho. Así que será IMPRESCINDIBLE poner texto debajo con el título de la entrada para que nuestros lectores sepan qué es lo que van a ver.

Y por si esta razón no te parece suficiente, por temas de SEO y posicionamiento en GOOGLE pon texto siempre en tu índice. Por tanto, esta primera parte es OBLIGATORIA para todos lo que queráis crear un buen índice de posts para vuestro blog. 
HACER INDICE DE POSTS BLOG
Resumiendo, en esta entrada vamos a insertar esos cuadritos con texto y vamos a enlazar, en el propio texto, la entrada correspondiente. No tiene ningún misterio, de verdad. Además os enseñaré cómo insertar más filas en vuestras secciones y cómo actualizar el índice. Ya veréis qué facil es (costoso al principio en tiempo, que no quiero luego reclamaciones). 

Todo esto lo vamos a hacer en una PÁGINA de blogger

ANTES DE EMPEZAR CON EL TUTORIAL

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.

HACER INDICE DE POSTS BLOG

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.

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: 11px; letter-spacing: 3px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="20" cellspacing="10""><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: 11px; letter-spacing: 3px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="20" cellspacing="10""><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)
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. Y ahora ya estáis listos, a por el vídeo.



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

me puedes seguir por aquí
facebook          twitter          instagram
si te ha gustado ¡compártelo!

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

51 comentarios:

  1. Me encanta ese índice!! Lo hago seguro!! Gracias porque me parece súper original

    ResponderEliminar
  2. Me encanta la idea! Esto me da una opción muy buena para organizar mi blog de otra forma. Esta semana estoy a tope y el finde me voy fuera así que espero ponerme prontito con esto para que publiques la siguiente parte.
    besos may!

    ResponderEliminar
  3. Ohh genial ¡¡¡¡¡¡¡¡¡ me volvía loca buscando hace poco poner un índice en condiciones, ya tengo trabajo estos días ,te pondré un antes y un después. Que apañada eres ...mil gracias¡¡¡

    ResponderEliminar
  4. May, hemos estado haciendo lo mismo al mismo tiempo, ja, ja. ¡Qué casualidad! Tienes razón que no hay nada de tutoriales de esto, al final yo también tuve que hacer el Juan Palomo con el consiguiente prueba-error y dispendio de tiempo a tope.
    Yo todavía lo tengo a medias, pero ya he empezado, eso sí, yo he puesto imágenes ; )

    Un Beso guapa!

    ResponderEliminar
  5. Que bueno May, estaba buscando algo así solo que mi blog ahora es Wordpress. El código sé que funciona igual pero mi pregunta es si es responsive... me pasó con un código de Blanca que no me sirve porque en el móvil se ve fatal. Espero me puedas responder. Gracias!

    ResponderEliminar
  6. Muchas gracias por hacer una entrada sobre este tema, muy bien explicada. A ver si me animo y lo hago pronto.

    ResponderEliminar
  7. Espero que este tutorial me funcione...he probado otros y nada, imposible! Prometo hacer algo decente, al menos con los tutoriales que tengo de manualidades.
    bss!

    ResponderEliminar
  8. Se lo pasaré a mi chico a ver si me hace algún arreglito en el blog.
    Muchas gracias. Besos

    ResponderEliminar
  9. Me encantan estas cosas, pero cuando veo códigos....se me hace una bola en el estómago :( . De todos modos voy a leermelo a ver si veo como hacerlo. :D
    Besote!!!!!

    ResponderEliminar
    Respuestas
    1. y mírate el vídeo! Te aseguro que no da nada de miedo!!!

      Eliminar
    2. Ok me lo miraré también :D, gracias

      Eliminar
  10. Wow! esta buenísimo el tutorial! lo implementare en mi blog!
    Gracias por compartirla Maite!
    Esperando con ansias la parte 2
    Saludos!

    ResponderEliminar
  11. Pues la verdad es que me parece muy interesante hacer un índice de posts... Tengo que pensar cómo hacer el mío y ponerme cuando tenga la idea!

    ResponderEliminar
  12. Te ha quedado fenomenal! Ahora que ya tengo unos cuantos post me gustaría ordenarlos. La única pega que le veo a este sistema es que no es responsive al basarse en tablas, talvez modificandolas con css...pero lo encuentro complicado.

    ResponderEliminar
    Respuestas
    1. YA...ya lo pensé... Me lo apunto para cuando sepa cómo Mejorarlo

      Eliminar
    2. ¿Cómo?, no sabía que no era responsive...¡horror! Mai tienes que ayudarnos a resolver esto, el responsive es el coco.

      Un Beso.

      Eliminar
    3. el responsive no me va a quitar el sueño... pero lo intentaré!

      Eliminar
  13. muchisimas gracias por el tutorial, me parece muy interesante y lo voy a aplicar a mi blog!

    ResponderEliminar
  14. Índice de Posts hecho!! Juego con ventaja, tengo poquitas entradas aún y por lo tanto lo he hecho rápido. Muchas gracias y me apunto lo del tema de responsive.

    ResponderEliminar
  15. Es la primera vez que aplico uno de tus tutoriales a mi blog y por tanto, la primera vez que te comento. No sabes cuánto te lo agradezco, tenía hecha una lista bastante cutre y ahora me ha quedado ordenadísimo (aunque he mantenido la lista, que era un curro de muchos meses). ¡Gracias mil, May!

    Aquí te lo dejo para que veas cómo ha quedado: http://lapizdeele.blogspot.com.es/p/por-temas.html

    ResponderEliminar
  16. ¡Yupiiii! Ya lo he aplicado y queda genial. Muuuuuuuuuuuuchas gracias. Por si quieres echar un vistazo, aquí te dejo el enlace: http://www.fabricadeartesania.com/p/indice-de-posts.html

    Un abrazo.

    ResponderEliminar
  17. me ha chiflado!!! gran trabajo y muy bien explicado, me he puesto manos a la obra y llevo dos dias actualizando el indice, me ha encantado la idea
    mil gracias guapa

    ResponderEliminar
  18. Te amo infinitamente!
    Millón gracias.
    Eres un ángel.
    Si pudiera, te clonaría, el mundo necesita más personas como tú ♥

    ResponderEliminar
  19. Muchas gracias. Me encanta. Ya lo tengo hecho, sólo me falta subirlo al blog. Tengo que cambiar el menú. Me gustaría que quedara fijo, así que a buscar programación para hacerlo.

    Un abrazo.

    ResponderEliminar
  20. Me encanta este post tuyo, bueno, en general todo tu blog, pero tengo un problemilla, y es que, cuando inserto el código que dices, en una página de blogger, al ver en vista previa, me salen los cuadrados todos juntos, y con el texto sin centrar, por lo que solo puedo poner una palabra, ¿Cómo podría cambiarlo? Porque he intentado de todo y no ha servido de nada.

    También, y aprovechando que escribo por aquí, quisiera preguntarte como haces para que la barra que separa el titulo de la sección con los cuadrados se quede fija y no como una imagen que luego se pueda descargar.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola!!
      Pues no sé qué puede pasar. Tienes el HTML totalmente en blanco cuando pegas el código? No sé qué podría fallar.

      La barrita es un separador de entradas, hay muchos tutos!!

      Eliminar
    2. Si, tengo el HTML totalmente blanco, yo creo que tiene que ser algo del HTML de la plantilla que tengo del blog, porque además tengo problemas también con las etiquetas, que entro en una sección y en vez de enseñarme todas las publicaciones con esa misma etiqueta, me enseña las que quiere, y tampoco sé que hacer, porque en ningún sitio lo explica y yo soy algo torpe.

      Muchas gracias por responder. Soy la chica que te preguntó por Facebook si te había llegado mi correo :)

      Eliminar
  21. YO TENGO PROBLEM LAS NETRAS CADA UNPO SE QUEDA CON UN COLOR DIFERENTE TE PONGO ENLACE NO SE QUE ES PODRIAS AYUDARME , LO HE DEJADO ASI HASTA QUE SEPA QUE LE PASA MERÇI // GRACIAS
    http://saludesvidacuidemonos.blogspot.com.es/2015/10/indice.html

    ResponderEliminar
  22. Hola May ! Funciona tambien con el Wordpress?
    Mil gracias !!!

    Harmonie

    ResponderEliminar
  23. Hola May! He hecho este índice de posts desde que publicaste el post pero a mi me sale cada recuadro de diferente tamaño, en función del texto de dentro. Se puede arreglar?

    ResponderEliminar
  24. Hola May!
    Gracias por tu tutorial, me ha ido genial!!!! Ahora es más fácil encontrar los posts en mi blog, estoy encantada :)
    Te dejo el link de como ha quedado: http://comaprendreaaprendre.blogspot.com.es/p/blog-page_3.html

    ResponderEliminar
  25. Hola, May ¡está muy bonito el índice! Muchas gracias por este tutorial, pienso implementarlo en mi blog pronto :3
    Me di cuenta que el valor del ancho (width) de cada recuadro se puede poner con porcentajes. Como no embonaba bien en mi blog un índice de 4 columnas con 180px de ancho sólo lo sustituí por 25% y queda muy bien. Igual se puede hacer para tres columnas pero sería 33%
    Saludos :)

    ResponderEliminar
  26. Todo un chollo pero merece la pena.
    Muchísimas gracias¡

    Este ha sido mi resultado :)
    ÍNDICE de Objetivo Tutti-Fruti

    ResponderEliminar
  27. Hola May :)! Muchas gracias por la entrada, me has facilitado muchísimo la vida jajaja Solamente tengo una pregunta, a ver si consigo explicarme. Como tienes que poner la url del post para ponerlo en el menú de la parte de arriba, el índice sale como si fuera una entrada más del blog. ¿Es posible que no salga pero manteniendo la url en el menú de arriba? Quiero decir, que no forme parte del historial de entradas. No me he explicado muy allá, espero que me hayas entendido jaja
    Un besito y muchísimas gracias por tu blog, es mano de santo para personas ignorantes como yo jaja <3

    ResponderEliminar
  28. Excelente tutorial May. Muchíiiisimas gracias por tu gran ayuda.
    Abrazos.

    ResponderEliminar
  29. Me encanta este índice pero tendré que esperar pues apenas voy a publicar y con cuatro entradas, se verá muy vacío, verdad? .......aunque se me acaba de ocurrir algo....je je je.
    Muchas gracias Mayor. Abrazotes.

    ResponderEliminar
  30. Muchisimas gracias por el tutorial, ha sido trabajo de chinos pero por fín tengo todas mis entradas ordenadas. Tengo más de 500 y no me salian todas en el índice que tenía por etiquetas, solo me falta ir añadiendo las fotos poquito a poco. Saludos y gracias de neuvo

    ResponderEliminar
  31. Sos una genia! Me esta quedando genial!

    http://narufananime.blogspot.com.ar/p/series.html

    Ahora me voy a la segunda parte para meter las imagenes! :3
    Muchas gracias!

    ResponderEliminar
  32. ¡Hola! Muchísimas gracias por el tutorial. Ahora tengo todas mis secciones bien ordenaditas ^^

    Besos

    ResponderEliminar
  33. Hace un par de días que encontre tu blog y me ha sido súper útil!! de hecho ya he puesto en practica un par de truquitos!! Tengo una pregunta ¿el código para hacer los gadget despegables también sirve para hacer despegable el menú?

    ResponderEliminar
  34. Hola, quisiera saber si alguien sabe como hacer un indice para un post pero, osea dentro del post algo asi como que cuando alguien lea el post al principio ponga que si:

    Como hacer una vela
    que se necesita
    donde comprarlo
    cuando comprarlo


    Y que cuando la persona de click en una de esas preguntas no lo envie a otra pagino si no en el mismo post mas abajo... no se si me hago entender :( algo asi tipo la ayuda de window, :( alguien ayudeme

    ResponderEliminar
    Respuestas
    1. Hola!!

      Con esto mismo lo puedes hacer, yo suelo usarlo todos los días en mis posts.
      y para la segunda parte mira este post: http://personalizaciondeblogs.blogspot.com.es/2013/12/como-poner-un-link-un-sitio-mas-abajo.html
      beso

      Eliminar
  35. Me ha venido super bien! Qué bien explicado y todo, gracias! Se me ha quedado bien, aunque al cambiar el ancho de página del blog después, se me sale el índice por el lado y no sé si hay manera de reducir el tamaño de las casillas en general o es muy loco. Gracias por este post!

    ResponderEliminar
  36. Muchas gracias por este tutorial! Ya lo he puesto en práctica en mi blog solounapuntadita.blogspot.com.ar Ahora me falta ponerme manos a la obra con la segunda parte ;-)

    ResponderEliminar
  37. Gracias gracias y mil gracias. Después de visitar un trillón de páginas y volverme loca, por fin he encontrado tu blog y la solución perfecta para hacer no sólo un índice sencillo sino precioso y muy vistoso. La única persona en todo internet que ha sabido enseñarme de verdad cómo hacer el índice. Y gracias a ti y a ir rebuscando en diseño, ajustes, etc de blogger, he entendido un poco mejor como funciona todo.
    Un besazo enorme, tienes un blog precioso

    ResponderEliminar
  38. Quería darte las gracias por este post, hace tiempo que te sigo y me gusta mucho tu blog pero éste post me ha resultado súper útil para poner orden antes de que sea demasiado tarde :)
    Súper claro ¡gracias!
    Ciao!

    ResponderEliminar
  39. Muchas gracias, ¡al fin un índice que funciona!, lo estoy armando antes de publicarlo. Te planteo una pregunta ¿como cambiar el color de la tipografía Arial?
    Aparece en un color beige y es poco legible.
    Nuevamente muchas gracias.

    ResponderEliminar
  40. Muy buen indice!! gracias por compartirlo

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!