16 febrero 2016

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








8 comentarios:

  1. Muchas gracias Raquel, agradezco el trabajo extra que has hecho para resolver mi duda, me declaro fan incondicional de tu blog y perdona por las molestias que he podido ocasionar con la duda ;P

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentármelo Raude, para mi no ha sido ninguna molestia, lo he terminado en un momento y feliz de poderte ayudar. Y mil gracias por tus palabras, estoy encantada de contar contigo, un beso!

      Eliminar
  2. 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
  3. 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
    Respuestas
    1. La verdad es que sería fantástico, yo soy de las que piensa que la estética visual es tan importante como el contenido. Y particularmente el uso de galerías o moodboards para presentar imágenes, me encanta. Un blog que las incluye, me gana de primeras :) un beso!

      Eliminar
  4. ¡Eres una crack Raquel! ¡Ojalá hubiese conocido tu blog antes! Hubiese hecho muchas cosas de manera muy diferente. Pero bueno, poco a poco, creo que podré ir mejorando mi blog gracias a tus tutoriales!!!
    Tengo una pequeña pregunta, igual es obvio, pero yo la lanzo igualmente... Entiendo que puedo crear una galería de imágenes creando una página en el blog, en vez de una entrada (¿?) Quisiera crear una con fotos de los productos que compro (como una especie de lista de la compra o algo así...) Creo que puede ser de ayuda para que mis lectoras puedan visualizar algunos de los ingredientes que utilizo... ¡MUCHAS GRACIAS!

    ResponderEliminar
    Respuestas
    1. Por supuesto que sí Helena, puedes poner la galería donde quieras: una página o una entrada. Su uso es infinito, para mostrar productos como dices, para crear el Indice de tu blog, para hacer la portada con varias imágenes y enlaces a los posts más importantes por ejemplo... a una tabla HTML, se le saca cantidad de partido. Me alegra que el blog te esté ayudando tanto, esa es mi principal intención. Gracias a ti por ser tan majísima y por el interés que le pones a todo, un besote!

      Eliminar

demo