Cómo hacer un mosaico de fotos en Blogger

Ahí va mi composición con fotos de diversos detalles de Port Aventura :





Ahora las explicaciones pertinentes... que pueden parecer un poco liosas pero que seguro le "pillas el tranquillo" rápido, es sólo cuestión de fijarse bien !!

Bien, lo primero que debes hacer es subir cada imagen a modo individual, como vienes haciendo habitualmente (en la pestaña de "redactar")... Yo te recomendaría subir de cada vez únicamente las imágenes que vayas a poner en cada fila del mosaico, más que nada para no liarte con tanto código... Seguidamente debes entrar en la pestaña "HTML" y pegar este código :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-RgCBxIW_b9U/VCJJvJjTo5I/AAAAAAAAQMQ/KXV32GdbOeQ/s1600/Gafas-Pajita-Port-Aventura.jpg" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://3.bp.blogspot.com/-RgCBxIW_b9U/VCJJvJjTo5I/AAAAAAAAQMQ/KXV32GdbOeQ/s1600/Gafas-Pajita-Port-Aventura.jpg" /></a><a href="http://2.bp.blogspot.com/-BdoyXxho_QI/VCJJwqXI3cI/AAAAAAAAQMY/ReFv-8Pnt10/s1600/Angkor-2014.jpg" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://2.bp.blogspot.com/-BdoyXxho_QI/VCJJwqXI3cI/AAAAAAAAQMY/ReFv-8Pnt10/s1600/Angkor-2014.jpg" /></a><a href="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLs/3W0fC59UuY8/s1600/Hotel-Port-Aventura.jpg" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLo/KXoTMtOV9VI/s1600/Hotel-Port-Aventura.jpg" /></a></div>


Luego deberás sustituir los href, la parte que he destacado en color morado, por los href de cada foto subida de modo individualmente anteriormente y los src, la parte que he destacado en color verde, por los src de cada foto subida de modo individual anteriormente.

Cada href y src corresponde a una foto, yo he puesto tres href y tres src ya que he colocado tres fotos por línea en mi mosaico, pero esto es totalmente variable, de este modo, por cada foto que quieras subir la parte del código a añadir sería :

<a href="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLs/3W0fC59UuY8/s1600/Hotel-Port-Aventura.jpg" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLo/KXoTMtOV9VI/s1600/Hotel-Port-Aventura.jpg" /></a>

Debes de tener en cuenta que siempre habrá que añadir al principio del todo lo siguiente :

<div class="separator" style="clear: both; text-align: center;">

Con ello conseguiremos que nuestras imágenes queden centradas.

Y al final del todo esto otro :

</div>

Una vez lo tengas, ya podrás borrar las imágenes que habías subido individualmente al principio del todo, para ello lo más sencillo es ir a la pestaña de "redactar", seleccionarlas (haciendo click con el botón izdo. del ratón) y del menú que se nos desplegará simplemente seleccionar la opción "eliminar".

Y ya una última cosa, muy importante, si pones distinto número de fotos por línea las imágenes no quedarán alineadas en los laterales, os muestro un ejemplo :




Y es que Blogger añade automáticamente unos márgenes que hacen que no puedan por ello cuadrar exactamente líneas con distinto número de imágenes.

Ahora a disfrutar componiendo mosaicos ! ; )

¡Muchas gracias por compartir el post!

Sobre la autora

¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

5 comentarios:

  1. ¡Que interesante! Me ha gustado mucho la idea, gracias por compartirla. Besos.

    ResponderEliminar
    Respuestas
    1. Me alegro de que te guste la idea ! Y de nadaaaaaa

      Saludos

      Eliminar
  2. Respuestas
    1. Mil de nadas, me alegra mucho que te sirva el tutorial !

      Besos

      Eliminar
  3. qur genial, solo por eso te voy a seguir en las redes sociales jeje. Uma pregunta, se pueden poner enlaces a cada una de las imagenes?

    ResponderEliminar

Follow my blog with Bloglovin