Como crear una Galeria de Imagenes en tu blog (2º Metodo)

25 febrero 2016

crear galeria imagenes blogger

El año pasado os había enseñado como crear una Galería en Blogger, aunque la mayoría pudisteis aplicarlo con éxito, hubo algunos que no fue así, por eso hoy os traigo un segundo método que me parece mucho mas sencillo que el primero.


El código lo tenemos que colocar en una pagina de Blogger o en un post, antes de todo necesitareis conseguir la Url de la imagen que queréis mostrar para crear la Galería de Imágenes.

<table cellpadding="8">

<tbody>
<tr>
<td align="center" width="33%"><a href="Aqui va la Direccion URL" target="_blank"> <img height="140" src="URL Imagen" width="140" /><br />Tu Texto descripcion aqui</a></td>

<td align="center" width="33%"><a href="Aqui va la Direccion URL" target="_blank"> <img height="140" src=URL Imagen" width="140" /><br />Tu Texto descripcion aqui</a></td>

<td align="center" width="33%"><a href="Aqui va la Direccion URL" target="_blank"> <img height="140" src="URL Imagen" width="140" /><br />Tu Texto descripcion aqui</a></td>
</tr>
<tr>
<td align="center" width="33%"><a href="Aqui va la Direccion URL" target="_blank"> <img height="140" src="URL Imagen" width="140" /><br />Tu Texto descripcion aqui</a></td>

</tr>
</tbody>
</table>



Con este código nuestra galería de imágenes quedaría de la siguiente manera, aunque como ya sabéis podemos adaptarla a nuestro gusto modificando algunas partes del código.
crear galeria imagenes blogger


Una de las partes mas importantes del código es entender como montamos las filas y columnas, para eso tenemos el atributo <tr></tr> como veis en este código he montado tres columnas y  dos filas, abriremos con <tr> encima de la primera imagen en la categoría "Helados" y cerramos al final de la imagen de la categoría "Viajes" y para abrir nueva fila volvemos abrir este atributo antes de la primera imagen de la siguiente fila.

Y otra parte importante es del elemento Width como veis le atribuimos un porcentaje, que entre las fotos de cada fila debe sumar el 100%.

Y por ultimo el elemento <table cellpadding="8"> podemos modificar el numero para modificar las distancia horizontal entre las imágenes. Si ponemos "0" las imágenes quedaran totalmente juntas como se ve en la siguiente imagen. Si queremos que haya mas separación tenemos que ir incrementado este numero hasta que consigamos la distancia que queremos.

crear galeria imagenes blogger

Gracias por leerme, si lo conseguir aplicar con éxito hacérmelo saber en los comentarios. ;)

11 comentarios

  1. Que interesante!!!
    Voy a ver si me sale, porque con estas cosas soy un poquito, o "muchito" inculta! jiji!

    Un besazo!

    ResponderEliminar
  2. Hola
    Esto valdría como menu y que te dirija a la descripción (etiqueta) de debajo de cada foto???

    Gracias

    ResponderEliminar
    Respuestas
    1. Si podría servir para crear en el menu una apartado que se llame por ejemplo "Categorias" que te llevaria a ese galeria y de ahi enlazar con las categorías(enlace) que tu quieras.

      Eliminar
  3. Gracias guapisima me has salvado la vida ¡Me encanta esta galería! dame tiempo para poner tooooodas mis fotos en un collage y vendré a decirte que eres una crack....otra vez!!!
    muchos besos ¡No sabes las ganas que tenia de encontrar un tutorial asi! ahora me toca el curro de poner una a una las fotos pero bueno ....paciencia muchos besos
    Mila

    ResponderEliminar
  4. Llevaba mucho tiempo buscando el modo en el que poner una galería. ¡Por fin he podido! Mil Gracias, creo que me voy a pasar muy a menudo por tu blog.

    ResponderEliminar
  5. Llevaba mucho tiempo buscando el modo en el que poner una galería. ¡Por fin he podido! Mil Gracias, creo que me voy a pasar muy a menudo por tu blog.

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. como puedo hacer para que esta galería estea en modo lightbox?

    ResponderEliminar
  8. Pues yo quería un menú galería.... a ver si me sale con tus instrucciones... y ¿cómo podría poner las imágenes en círculo?
    Muchas gracias.
    Un saludo

    ResponderEliminar
  9. Muchísimas gracias. Llevaba un buen tiempo buscando el codigo

    ResponderEliminar