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 instertar 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.


primeros pasos: pensar en las imágenes

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 fotos para que todas sean iguales
vemos el tutorial
colorzilla 
para sacar colores
fotor
para ajustar fotos
el tutorial


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


<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>

  • -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)
aprende a montar una tienda online
en blogger
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
Bueno, y esto es todo por esta semana. Yo creo que tenéis tarea para rato y espero que os pongáis a trabajar en cuanto podáis. Y recordad que, si os gusta, podéis compartirlo, que es gratis. Recordad que aquí tenéis la primera parte del tutorial, por si os la habéis perdido

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: