Creative Mindly: Cómo crear un índice de posts con imágenes

Lo prometido es deuda, así que aquí tenéis la segunda parte del tutorial. Si estás leyendo esto sin haber visto la primera parte, muy mal, así que aquí tienes la primera parte, empieza por el principio. Como ya os dije el otro día no os recomiendo nada nada hace un índice solo con las imágenes, podéis hacerlo, sois libres pero no lo recomiendo, ahí queda.

Como ya os amenacé hoy vamos a insertar una imagen que acompañe al texto que hicimos en la entrada anterior. Ya os dije que fueráis poco a poco, pero sin parar que cuanto antes tengáis vuestro índice mejor. Como vais a ver en el tutorial insertar las imágenes está tirado, facilísimo (con musiquilla y todo) de hecho podéis ver cómo quedan las imágenes en mi índice de entradas. Aquí os dejo una imagen para que os hagáis una idea de cómo os puede quedar.

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

más info

Antes de empezar

Lo primero que tendríamos que hacer es escribir, en un papel, en un word, o lo que sea, los nombres de los posts que queremos incluir en nuestro índice. Yo os recomiendo que los clasifiquéis en secciones, así será mucho más fácil la búsqueda. Una vez elegidos los posts, tenemos que seleccionar las fotos que queremos que ilustren cada una de las entradas. Aquí sois muy libres de hacer lo que queráis. En mi caso he hecho unos diseños que ilustren, más o menos, el contenido. Una vez elegidas las fotos, las guardaremos en una carpeta, para tener todo más a mano.

Tendremos que adaptar el tamaño de la foto al espacio del que dispongamos. Esto lo veremos en el tutorial, pero os lo aviso, para que os vayáis preparando. Yo lo haré con picmonkey, pero podéis usar pixlr, por ejemplo. Una vez que hayamos escrito los posts que queremos incluir, hayamos guardado las fotos que ilustren los posts en una carpeta, es el momento de elegir la disposición. Yo os voy a dejar 4 disposiciones diferentes, vosotros podéis elegir la que queráis. En el vídeo os contaré cómo hacer las modificaciones. Y ahora os hago el resumen:

Escribimos los posts en un papel o en un word
Elegimos las fotos que queremos incluir en el índice.
Guardamos todas las fotos en una carpeta
Ajustamos el tamaño de las imágenes para que sean todas iguales.
Vemos el tutorial

Materiales

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

El tutorial

Ir a la primera parte

solo 4 fotos

<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 3px 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>

solo 3 fotos

<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; 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>

4 fotos con texto debajo

<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><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>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>

3 fotos con texto debajo

<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><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>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 9px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px 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).

Cursos papelería

TIENDA

AGENDAS

GRATIS

LÍNEAS TIEMPO

CURSO PAPELERÍA PARA ORGANIZARTE

Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más.

más info

PACK PROFES FETÉN

Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones.

más info

PACK ESTUDIANTES CUM LAUDE

Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores.

más info

CURSO TUS APUNTES FLAMANTES

Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point.

más info

CURSO DISEÑA TU MATERIAL DOCENTE

Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más.

más info

CURSO DISEÑO DE PACKAGING

Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa.

más info

CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES

Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites.

más info