Crear un Indice de Posts Manual
Muy buenas a todos. llevo varios días poniendo en orden el índice de posts de esta maravilloso (pero llenísimo de entradas).Así que ni corto ni perezoso me puse a buscar 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. Hasta que al fin encontré uno nada complicado de hacer y queda la mar de guapo y curioso lo encontre en creativemindly, por cierto muí bien explicado i documentado.
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.
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.
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.
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.
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: verdana; 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: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
<tr>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
ÍNDICE DE 4 COLUMNAS
<table style="font-family: verdana; 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: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
<tr>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 2px 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 Verdana 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 amarillo 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 rojillo: 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.
Hacer clic en el boton para ir al Video
01-04-2017
Fuente: creativemindly
Publicado por
0 comentarios:
Publicar un comentario