Crea una galería de imágenes en tu blog + 8 bancos de imágenes gratuitas

como-crear-galeria-de-imagenes-en-blogger

Una forma muy interesante para presentar una entrada que contiene un buen número de imágenes, puede ser crear una galería donde muestres esas imágenes alineadas en fila y puedas enlazar a la vez, cada una a un destino distinto, según te convenga.


Para que lo entiendas mejor, te puede ser muy útil si tienes una tienda online y quieres hacer un especial mostrando tus productos o creaciones. También te puede servir para hacer un recopilatorio de entradas antiguas del blog, un tablero de fotografías enlazadas a tu Instagram, una selección de recomendaciones...


Yo, por ejemplo en esta ocasión lo he utilizado para mostrarte una selección de imágenes gratuitas (de libre uso) que si haces clic en cada una de ellas, enlazan a las paginas, desde las que te podrás descargar dichas fotografías en alta resolución. Con lo cual, hoy te ofrezco un 2x1: un tutorial HTML muy útil + 8 webs de imágenes de libre uso. Recuerda pinchar en cada imagen para ir a la web correspondiente.










Y ahora, vamos con el tutorial.


 Para hacer una galería de imágenes como esta, tan solo tienes que:


  Crear una entrada nueva en tu blog


  Pinchar en la pestaña HTML


  Pegar el siguiente código


<table border="0" cellpadding="4"><tbody>

<tr>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

</tr>

</tbody></table>

Lo que está en colores, es lo que vamos a modificar para crear nuestra galería de imágenes:


  En primer lugar nos encontramos con el código table border="0", esto solamente lo modificarás si deseas que tu galería tenga un borde alrededor, añadiéndole en ese caso el valor de grosor que desees para la línea que encuadre tu galería.


  El segundo código, cellpadding="4", corresponde a la separación de las imágenes que incluyas en tu presentación. Deberás aumentar este valor o disminuirlo, según la distancia que quieras crear en cada imagen respecto a la siguiente.


  En "URL DESTINO" debemos pegar la dirección a la que llevaremos al lector , cuando haga clic en la imagen.

  Pegaremos la dirección de nuestra imagen en "URL IMAGEN" (si no sabes cómo obtener la dirección de tu imagen, clic aquí y te lo explico en un plis)


  Si quieres añadir una descripción a tu imagen, rellena el campo "DESCRIPCION", si prefieres dejarlo en blanco, selecciona esta parte del codigo: alt="DESCRIPCION" y suprímelo (aunque te aconsejo que la añadas, porque es muy útil de cara al seo)


IMPORTANTE: redimensiona las imágenes antes de pegar la dirección de enlace. Todas deben tener las mismas medidas para que la galería se vea armónica. Debes tener en cuenta el ancho de tus entradas para averiguar (según el número de imágenes que añadas en cada línea) la anchura que debe tener cada una de ellas. Por ejemplo:


  Si yo tengo un ancho máximo de 650px para mis entradas y quiero añadir 5 fotografías en cada línea, debo dividir 650/5= 130px. A esa cantidad le debo quitar al menos 10px, si quiero que me quede alguna separación entre ellas, con lo cual la medida correcta sería 120px.





Si aun así, una vez que introducimos el código HTML, vemos necesario agrandarlas o reducirlas, debes añadir el siguiente código  width="ancho deseado en pixeles", justo a continuación de  "URL IMAGEN". Quedaría de esta manera:


<table border="0" cellpadding="4"><tbody>

<tr>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

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


Sustituyendo la palabra "ancho en pixeles" por el valor que necesites, por ejemplo "150". Recuerda no introducir la medida en la tabla desde el principio, (porque va a influir en el tamaño inicial de tu imagen), sino como retoque si crees que es necesario. Aunque yo no tocaría aquí, para evitar deformar la imagen.




Cómo añadir o quitar líneas a nuestra galería:




Con el código que te muestro al principio, tienes una galería de una sola línea y cuatro filas. Si quieres añadir más líneas, copia el código completo y pégalo a continuación en el HTML de tu entrada:


<table border="0" cellpadding="4"><tbody>

<tr>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

</tr>

</tbody></table>

<table border="0" cellpadding="4"><tbody>

<tr>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
</tr>
</tbody></table>



Y así sucesivamente, tantas líneas como desees.



Cómo añadir o quitar filas a nuestra galería de imágenes:



Si quieres quitar filas (imágenes), selecciona una y suprime (en negrita te señalo todo lo que debes suprimir):





<table border="0" cellpadding="4"><tbody>

<tr>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
</tr>
</tbody></table>




Y si quieres añadir selecciona, copia y pega:




<table border="0" cellpadding="4"><tbody>

<tr>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
</tr>
</tbody></table>





Añade color en el fondo o en el borde de tu galería




Otra manera de añadirle un extra de encanto a tu galería, es incluir un fondo o colorear el borde de algún color que guarde relación con las imágenes o con los tonos de tu blog. Para que tengas claro el resultado te lo muestro a continuación:








En la primera tabla, he incorporado un fondo de color y en la segunda, le he dado color al borde de la tabla. ¿Qué te parece el efecto? ¿te mola? pues aquí te cuento cómo se hace:





Añadir un fondo de color



<table bgcolor="#E3ABC4" border="2" bordercolor="#E3ABC4" cellpadding="4"><tbody>
<tr>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
</tr>
</tbody></table>


  Cambia el número hexadecimal que aparece en naranja #E3ABC4 por el que corresponda al color que te guste. Si no sabes cómo incluir colores hexadecimales, te aconsejo que te instales la extensión Colorzilla y si quieres que te cuente cómo usarla, en el anterior tutorial que publiqué, te lo cuento en vídeo, además de enseñarte a crear una barra informativa.



  En esta ocasión, he puesto un borde, porque como se mostraban las dos tablas juntas, de no hacerlo, hubieran quedado descompensadas en alineación, pero cómo puedes observar, le he puesto el mismo tono, para que no se note. Si tú vas a añadirle a tus tablas el mismo fondo y no vas a incluir bordes, puedes dejar el borde a 0 y suprimir la parte que pone bordercolor="#E3ABC4. Aunque también la puedes aprovechar para resaltar un color de borde dentro del fondo, pero recuerda que si añades un borde, debes tener un valor superior a 0 y cuanto mayor sea el valor, más grueso será el borde.






Colorear el borde de la galería de imágenes


Para añadir un color al borde, tan sólo tendrás que determinar el grueso que tendrá, aumentando o disminuyendo el valor border="2y añadir el número hexadecimal que corresponda al tono que quieres que se muestre.


<table border="2" bordercolor="#E3ABC4" cellpadding="4"><tbody>
<tr>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
<td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
</tr>
</tbody></table>



Crear una galeria de imágenes sin enlaces



Después de publicar el post, me han preguntado como crear la galería sin enlazar las imágenes. Así que lo voy a explicar, por si alguien más, ha tenido esa duda. 
Si no deseas incluir ningún enlace en tus imágenes, tendrías que eliminar las etiquetas <a> </a> que son las que direccionan a un vínculo. Quedaría de esta manera:




<table border="0" cellpadding="4"><tbody>

<tr>

<td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

<td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

<td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

<td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

</tr>

</tbody></table>




Pues esto ha sido todo, creo que lo he explicado de una manera sencilla y que lo habrás entendido sin dificultad, pero si tienes alguna duda, deja tu comentario y te lo aclararé tan pronto como lo lea. De paso estaría genial que me contaras qué te ha parecido la entrada de hoy y qué es lo que más te ha gustado ¿el tutorial o las páginas de imágenes gratuitas?  (espero que las dos)





Descubre cómo presentar varias imágenes para captar la atención.Tuitéalo



¡Que tengas una gran semana!



¿Te gustaría seguirme en tu lector de feeds favorito?




Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor, exclusivos para mis chicas, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.


¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo   


 Únete a la Comunidad Demo 2.0








Comentarios

  1. Muchas gracias Raquel de nuevo por tu post.
    pero lo guardere para más adelante, me parece un poco complicado los codigos y todos los cambios .
    Aunque lo explicas muy bien el paso a paso. ¡¡Me encanta!!

    ResponderEliminar
    Respuestas
    1. No es muy complicado Elisa, solo tienes que pegar la dirección de la imagen y el enlace a donde quieras que lleve esa imagen. De todas maneras, cuando tenga un hueco, creo un tutorial para que lo veas en directo. Un beso!

      Eliminar
  2. Muy buen tutorial Raquel, paso a paso es imposible que nadie se pierda, seguro que a partir de ahora vemos un montón de galería de imágenes en blogs ;) ¡un abrazo!

    ResponderEliminar
  3. Muchas Gracias por el Tuto, pero aun así tengo una duda, como hago si en vez de direccionar a otra url , quiero que se vean en mi blog como otra imagen, y asi poder disfrutar de todas las fotos de la galeria sin salir del Blog...espero tu respuesta Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Gabriel, para eso creo que lo mejor es crear la tabla y dentro introducir el código que encuentras en este tutorial de Blanca Balzola: http://personalizaciondeblogs.blogspot.com/2013/04/fotos-de-antes-y-despues-que-cambian.html

      Un saludo!

      Eliminar

Publicar un comentario