Revista En Femenino

Cómo hacer un mosaico de fotos en Blogger

Por Arántzazu Quiroga Alonso
Ahí va mi composición con fotos de diversos detalles de Port Aventura :
Cómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en BloggerCómo hacer un mosaico de fotos en Blogger
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 :
Cómo hacer un mosaico de fotos en Blogger
Cómo hacer un mosaico de fotos en Blogger
Cómo hacer un mosaico de fotos en Blogger
Cómo hacer un mosaico de fotos en Blogger

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 ! ; )
Cómo hacer un mosaico de fotos en Blogger
Cómo hacer un mosaico de fotos en Blogger

Volver a la Portada de Logo Paperblog