Hacer indice de entradas con imágenes

Hará unos días subí otro tutorial de como hacer indices de las entradas (pero para blogger), podéis ver la entrada dando click aqui  se puede decir que es la primera parte.

Este tuto que os traigo ahora vale para cualquier tipo de blog (sea en web, blogger, wordpress....)

Paso 1: pensar que secciones quieres

Piensa que tipo de indice quieres y buscar las imágenes que pegarían con esas secciones, podéis escribirlas en un word, en un folio, aunque yo aconsejo tener una libreta "Bullet journal" que puedes conseguirlas dando click aqui por 6,79 euros (interior en blanco y negro) y dando click aqui por menos de 17,49 euros (interior a color)

Aunque yo uso photoshop podéis usar pixlr o canva que es gratis, online y fácil de usar.

Este tutorial lo haré con canva para que todos podáis seguir el tutorial


Pasos que debes hacer antes de ver el video tutorial
1. Escribimos los posts en un papel,en un word o en tu bullet journal que puedes comprar dando click aqui
2. elegimos las fotos que queremos incluir en el índice
3. guardamos todas las fotos en una carpeta


Paso 2 video tutorial, si tenéis dudas dejar un comentario

sólo 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, ya que es un tipo de letra muy legible
• El color verde: es el tamaño de la tipografía.
• 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)