Cómo crear un índice de posts con imágenes - parte II -


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
11,99€
22€
65€
50€
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:

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

Materiales
Aprende a crear una web o un blog más profesional y responsive
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).
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: