Mejora tu blog con una galería de proyectos

Incluir una galería de imágenes con todos nuestros proyectos mejora la navegabilidad de nuestros blogs. Hacerlo con HTML es sencillo, sólo necesitaréis dedicarle un poco de atención y conseguiréis facilitar la experiencia del lector porque podrá ver todos vuestros inventos de un plumazo. Recordemos que nos movemos por un mundo muy visual en el que más que leer, devoramos imágenes. Pongámoslo fácil pues!

Necesitamos: Un blog, imágenes de los proyectos que queramos mostrar y un ratito tranquilo. Es recomendable que todas las imágenes sean pequeñas (las mías por ejemplo hacen 180 x 198 px) y también que las hayamos colgado previamente para tener su URL. Si alguien no sabe cómo conseguir la URL de una imagen que se dirija al punto 1 de este enlace.

Vamos a crear una entrada o una nueva página, clicamos sobre el botón de HTML y allí escribimos el siguiente código para crear la tabla que contendrá todas las imágenes. Cada imagen funcionará como un botón para ir directamente a ese post en concreto. (Dejo aquí el código para que lo podáis copiar)

<table border="0" cellpadding="4"><tbody>
<tr>
<td> <a href="URL DESTINO" target="_self"><img src="URL IMAGEN" alt=""/></a> </td>
<td> <a href="URL DESTINO" target="_self"><img src="URL IMAGEN" alt=""/></a> </td>
<td> <a href="URL DESTINO" target="_self"><img src="URL IMAGEN" alt=""/></a> </td>
</tr>
</tbody></table>

A continuación analizaremos el significado de todo ese código. Esta es la explicación para una tabla de 1 fila y 3 columnas, a partir de estas indicaciones podrás diseñar la tuya con tantas filas y columnas como quieras.

Espero que le saquéis mucho provecho compañer@s! Y recordad que también vale la pena dedicar un rato a añadir botones "Pin me" de pinterest a vuestras fotos y poner todos los iconos sociales. 

Como siempre, si os surge cualquier duda la podéis dejar en comentarios y os responderé encantada :)

Besos!! Estaré al otro lado de mi galería de DIY's, Facebook y Twitter.

Marta