05 noviembre 2014

CÓMO CREAR UNA GALERÍA DE FOTOS (TABLA DE IMAGENES) EN EL BLOG

    En realidad el título de esta entrada debería ser mucho más largo porque sirve para mucho más que para hacer una galería de fotos o una tabla de imágenes.  






    Sirve por ejemplo para alinear fotos en una entrada como esta de aquí. ¿Veis la foto de la planta y el pollo? Pues loca me volví intentando colocarlas centradas, a la misma altura y con una separación adecuada, hasta que se me ocurrió el primer trucousar un editor fotográfico para unirlas con un espacio transparente en el centro y convertirlas en una sola foto. Y me quedé más ancha que larga. Pero claro, después se me ocurrió que podía hacer un menú en  imágenes de mi blog y llamarlo "Galería de la fama".



    Y aquí la cosa se complicaba... ¿Hacía una foto gigante compuesta de todas las fotos de mi blog? ¿Hacía varias fotos con media docena en cada una? Hmm no era mala opción pero yo quería que mis fotos fueran el enlace a la entrada, así que el editor fotográfico esta vez no era solución. Y buscando buscando encontré la solución: hacer una tabla donde puedes añadir fotos, texto, botones... de forma ordenada y sobre todo fácil. Vamos allá:

    Supongamos que lo que queremos hacer es una galería como la mía, la tengo en una página así que iremos a CREAR UNA PÁGINA NUEVA>>HTML y ahí pegaremos el siguiente código:




<table><tbody>

<tr>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO"  border="0" src=" URL FOTO " width="120" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr>

</tbody></table>

</td>


<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO"  border="0" src=" URL FOTO " width="120" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr>

</tbody></table>

</td>

<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO"  border="0" src=" URL FOTO " width="120" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr>

</tbody></table>

</td>
 
</tr>

</tbody></table>
 





    Cada bloque de texto azul es una celda de nuestra tabla (marca el número de columnas), y el código completo es una fila (en este caso tendríamos una fila de tres columnas). En la foto de mi galería he repetido una vez más el bloque azul para poner cuatro columnas, (siempre entre  <table><tbody><tr> y  </table></tbody></tr>y he repetido el código completo tres veces para tener tres filas. Lo que está marcado en rosa debemos modificarlo con nuestros datos:

URL: Dirección a la que enlazará nuestra foto al pinchar en ella (opcional).
TÍTULO  FOTO: Título o descripción de la foto (opcional, es el título que se ve si el navegador no carga la imagen)
URL FOTO: Dirección de nuestra imagen.
TEXTO: Escribe aquí lo que quieras (opcional). 
* width="120" :Corresponde a la anchura y también puedes variar su valor.


    Como siempre, modificando un poco aquí y otro poco allá, podemos hacer infinidad de cosas, como por ejemplo un catálogo de venta con precios y botón de paypal:



    Podemos crear tablas en una entrada, en una página, en la sidebar (mis iconos de redes sociales están puestos como tabla)... Podemos variar el número de filas o columnas en función del tamaño de nuestras fotos como en esta otra parte de mi galería:



    Ya puedes crear tu propia galería de fotos, ahora usa tu imaginación (y un poco de CCS) y cambia el tamaño de celda formando un collage, añade o quita el enlace a cada foto, haz que cada imagen cambie al pasar el raton encima....
    Eso si, RECOMENDACIÓN MUY IMPORTANTE: Escribe todo tu código en un documento de word y haz ahí las modificaciones y añadidos, después puedes copiarlo y pegarlo en tu blog (HTML). Será mucho más fácil.
    






Sígueme en:



http://eepurl.com/bct2DT

20 comentarios:

  1. Oooooooooh que maravilla ! Te agradezco mucho esta entrada, ahora es tarde pero lo leeré mañana tranquilamente y lo pruebo.

    Gracias, muchas gracias.

    Gloria

    ResponderEliminar
    Respuestas
    1. Me alegro que te haya gustado Glòria, si necesitas ayuda ya sabes ;) Muchas de nadas.

      Eliminar
  2. Madre mía!! vaya pedazo de tutorial!! Muchas gracias, está genial!!
    Yo estaba haciendo mi galeria de imágenes nueva, pero ahora me rompes esquemas...jajaja Bueno, ya veremos por cual me decido, porque así me gusta mucho.
    Buenas noches! Besos

    ResponderEliminar
    Respuestas
    1. Jajaja, "a pito pito gorgorito" y el que gane. Buenas noches!!

      Eliminar
  3. Muy interesante...gracias un saludo

    ResponderEliminar
    Respuestas
    1. De nada, espero que sea útil, otro saludito para ti ;)

      Eliminar
  4. Un gusto saludarte!!! Muy buena tu galería y que fácil parece hacerla. Creo que a mí me vendría bien para incorporarla. Quisiera hacerte una consulta: 1) Yo estoy en blogger: voy a crear página nueva entonces?, no entrada nueva.
    2) en cada celda al final pones texto 1 y texto 2, a que te refieres con 2 textos ...gracias!!!! y saludos

    ResponderEliminar
  5. Hola Rosana a mi personalmente me ha sido de gran ayuda. No solo este tutorial sino alguno mas como el de quitar la sidebar. Te recomendaré en mi blog. Soy un poco como tu estoy acabando un post i ya estoy pensando en cambiarlo. Me encanta poner chulo el blog i que los demás también puedan hacerlo.

    Te dejo mi enlance por si le quieres echar un ojo http://mestresideespercompartir.blogspot.com.es/p/blog-page_18.html

    ResponderEliminar
  6. He seguido este tutorial y me ha encantado!!!! me ha salido sin problemas!!!! Muchísimas gracias!!!

    ResponderEliminar
    Respuestas
    1. Me alegro, muachas de nada. Un besito.

      Eliminar
  7. Geniaaaa!! Pase horas buscando como hacer esto, y solo encontraba galerias en slider xD

    ResponderEliminar
    Respuestas
    1. Pues ya lo tienes!! Gracias por tu visita y tu comentario ;)

      Eliminar
  8. Hola buenas tardes, por casualidad tienes un tutorial de como crear un slide show? Saludos

    ResponderEliminar
    Respuestas
    1. Hola, es un poco largo para ponerlo en el comentario así que la semana que viene lo comparto en una entrada del blog. Un saludo y gracias por visitarme!

      Eliminar
    2. Aquí lo tienes: http://mientrascuchufletaduerme.blogspot.com.es/2016/07/como-poner-un-slideshow-en-el-blog.html

      Eliminar
  9. Muy buen tip gracias por compartirlo. Saludos

    ResponderEliminar
  10. ¡Hola!
    Muchísimas gracias por el código. Me encanta el resultado y será una forma estupenda de poner una galería de imágenes con enlace a todos mis patrones amigurumis disponibles en el blog.

    ¡Muchas gracias! ♥

    ResponderEliminar
  11. Muchas gracias! me encantó. Me cuesta mucho utilizar los códigos pero lo explicaste tan simple que logré hacerlo. Sólo tengo unas dudas:

    1. Cuando pongo el URL al que quiero que se dirija no pasa nada :( oprimo pero la imagen no redirige a ningun lugar. Por que sera que sucede?

    2. Las imagenes me salen pegadas una junto a la otra, como puedo separarlas un poco?

    ResponderEliminar
    Respuestas
    1. Hola Karen, me alegra saber que te ha sido útil. Respecto a tus preguntas, así sin ver, no sabría decirte. Comprueba que has escrito bien la URL de la página a la que quieres que te dirija al pinchar en la imagen y asegúrate de que has copiado bien el código. A veces cometemos un fallo tan obvio que nos cuesta verlo, puedes empezar desde cero o hacer uno nuevo en un blog/página de prueba.

      Para separar las celdas utiliza los parámetros de celspacing cellpaddin, prueba variando los valores.

      Un saludo y gracias por escribirme.

      Eliminar
  12. Muchas Gracias Me fue Muy Útil, Soy nuevo en esto y ya me estaba dando dolor de cabeza por que no podía alinear las imagenes ;)

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...