Como crear una Galeria de Imagenes en tu blog.

21 noviembre 2014



Hola, !!

Hoy os traigo un Tutorial sobre Html, para crear una Galería de imágenes para mostrar vuestros proyectos, o por ejemplo muy útil para los Blogs sobre DIY o Manualidades. Lo que permite crear esto son las tablas de Html, en lo que cada celda de la tabla esta representada por una imagen.

Este es el código que necesitamos para crear nuestra galería de imágenes, primero os dejo con el código que tenéis que copiar en la parte html de las paginas de Blogger o en vuestro post.

<table align="Alineación de la galería"border="0" cellpadding="4"><tbody>
<tr> */Abrimos fila
<td><a href="URL_DESTINO" target="_self"><img src="URL_IMAGEN" alt="" /></a> </td>  */Añadimos celda/Imagen
<td><a href="URL_DESTINO" target="_self"><img src="URL_IMAGEN" alt="" /></a> </td> */Añadimos celda/Imagen
</tr> */Cerramos Fila
<tr> */Abrimos Nueva Fila
<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> */Cerramos Fila y así sucesivamente para cada nueva fila.
</tbody></table>


A continuación paso a explicar como podéis personalizar este código para que la Galería de Imágenes tenga el aspecto que vosotros queréis y conseguir el numero de filas y columnas que queráis.

*Alineación de la Galeríaa : Aquí deberéis sustituirlo por right, left o center, dependiendo de la alineación que queráis para vuestra galería, si  por ejemplo la queréis centrada, pondréis center. 

* En "border="0" : El valor cero nos permite eliminar el borde alrededor de las fotos, si la queréis sin marco lo dejaremos a "0". Si por el contrario queréis borde, podéis añadirlo poniendo un valor mayor a cero en función del tamaño de borde que queráis. Si queréis que el borde tenga un color determinado, por ejemplo rojo debéis añadir justo después de border="0" este codigo: bordercolor="red"

* En cellpadding="4" : El numero 4 representa las distancia entre celdas/imágenes, si ponemos 0 no habrá separación entre ellas. Iremos subiendo el valor para conseguir mayor separación entre las celdas.

*<tr>  Indica la apertura de una nueva fila y <tr> representa cada celda dentro de esa fila. Por lo que en el código que os muestro conseguiréis una tabla de dos filas y dos columnas.

* URL_DESTINO: La dirección web o el link donde queremos que nos lleve al hacer click sobre esa imagen.

*URL_IMAGEN: Es la url de la imagen que obtendréis subiendo a un alojamiento de imágenes como Tynipic  o Imageshack. La dirección que necesitáis tiene que acabar en .jpg o en .png.


Si aun así no has quedado claro, tenéis a disposición mi email abloggingcup@hotmail.com , si os surge cualquier duda mientras montáis el código.

19 comentarios

  1. llevo tiempo intentando hacer esto y no encontraba la forma.
    Gracias!!!!! Me encanta tu blog, así que me quedo por aquí.
    Si quieres ver como uso tus consejos, pásate por mi blog de viajes ;)
    http://anden-27.blogspot.com.es/

    ResponderEliminar
  2. Lo he intentado pero no queda como yo querría... :( Seguiré investigando!

    ResponderEliminar
  3. Hola, gracias por el tutorial, me parece que me será muy útil. Voy a probarlo.
    Saludos.

    ResponderEliminar
  4. Si ya me ha enamorado tu blog en cuando he entrado, con esta entrada has terminado de conquistarme del todo... ¡hace tiempo que buscaba una forma de hacer esto!!!!

    Solo me queda decirte. gracias, gracias, y re gracias.

    Y sin duda, ¡me quedo aquí!

    ResponderEliminar
  5. Si ya me ha enamorado tu blog en cuando he entrado, con esta entrada has terminado de conquistarme del todo... ¡hace tiempo que buscaba una forma de hacer esto!!!!

    Solo me queda decirte. gracias, gracias, y re gracias.

    Y sin duda, ¡me quedo aquí!

    ResponderEliminar
  6. Si ya me ha enamorado tu blog en cuando he entrado, con esta entrada has terminado de conquistarme del todo... ¡hace tiempo que buscaba una forma de hacer esto!!!!

    Solo me queda decirte. gracias, gracias, y re gracias.

    Y sin duda, ¡me quedo aquí!

    ResponderEliminar
  7. La verdad es que siempre he imaginado que sería algo complicado. El código HTML para tablas, lo aprendí hace poquito y no pensaba que se aplicase a esto. Muchas gracias por la explicación. Está superclarito. Un abrazo.

    ResponderEliminar
  8. muchas gracias, para que quede un tamaño de imagen acorde al blog es con el tamaño de la imagen que se sube o hay otra forma de acotarla? Muchas gracias, tienes un blog genial!! un saluso

    ResponderEliminar
  9. Gracias por el código, nos ha sido muy útil.

    ResponderEliminar
  10. Quede encantada con este blog, pero tengo un problema con el código, yo quiero que me queden las imágenes bien separadas como en la foto del principio pero lo que me pasa es que me quedan las fotos de la misma fila quedan muy pegadas. Estuve buscando por todos los blogs y sites y ninuno me sirvió el Tito fue el que se acerco mas pero necesitaría resolver ese problema. Mil gracias por la ayuda

    ResponderEliminar
    Respuestas
    1. Me podrias pasar el enlace donde has puesto la galeria de imagenes o el codigo que has utilizado?

      Eliminar
  11. Más útil imposible!!! Muchas muchas gracias guapísima! Cada día me gusta más el blog, aunque no te comento, soy fija!

    ResponderEliminar
    Respuestas
    1. Mil gracias!! Cualquier sugerencia para futuros post se agradece.

      Eliminar
  12. Respuestas
    1. Si no se quiere enlazar un link se dejaría como esta.

      Eliminar
    2. Si no se quiere enlazar un link se dejaría como esta.

      Eliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar