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" >
<a href="http://3.bp.blogspot.com/-RgCBxIW_b9U/VCJJvJjTo5I/AAAAAAAAQMQ/KXV32GdbOeQ/s600/Gafas-Pajita-Port-Aventura.jpg" imageanchor="0" ><img border="0" src="http://3.bp.blogspot.com/-RgCBxIW_b9U/VCJJvJjTo5I/AAAAAAAAQMQ/KXV32GdbOeQ/s600/Gafas-Pajita-Port-Aventura.jpg" /></a><a href="http://2.bp.blogspot.com/-BdoyXxho_QI/VCJJwqXI3cI/AAAAAAAAQMY/ReFv-8Pnt10/s600/Angkor-2014.jpg" imageanchor="0" ><img border="0" src="http://2.bp.blogspot.com/-BdoyXxho_QI/VCJJwqXI3cI/AAAAAAAAQMY/ReFv-8Pnt10/s600/Angkor-2014.jpg" /></a><a href="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLs/3W0fC59UuY8/s600/Hotel-Port-Aventura.jpg" imageanchor="0" ><img border="0" src="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLo/KXoTMtOV9VI/s600/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/s600/Hotel-Port-Aventura.jpg" imageanchor="0" ><img border="0" src="http://1.bp.blogspot.com/-1-qxTz9hTOE/VCJGcbDDFYI/AAAAAAAAQLo/KXoTMtOV9VI/s600/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" >
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 ! ; )





Fuente: este post proviene de Café largo de ideas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Modificado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: niñosblogueradas

Recomendamos

Relacionado

niños código html tutoriales

Yo soy bastante maniática con el tema de las fotos en el blog, no me gusta que salgan pequeñas, sino prácticamente al tamaño del post, es decir ocupando todo el ancho del mismo... y hoy quiero compartir contigo cómo lo hago !! Bien, en mi caso concreto publico las fotos a un ancho fijo de 600 píxeles, y esa medida no la da por defecto Blogger con ninguna de las opciones que tiene habilitadas al ...

niños código html tutoriales

Un truco muy chulo que seguro te "engancha" y por ende lo añadirás en un montón de tus fotos !!. Te muestro un ejemplo... para verlo no tienes más que pasar el ratón sobre la imagen que te muestro a continuación. Puedes ver también este truco aplicado en mi página DIYs, así te doy otra idea de dónde puedes aplicar este truco ! Te explico el proceso, he subido mi foto clicando en el bot ...

cuidado infantil Escuela de padres Noticias

<p>¿Sabes cuándo debes realizar la primera revisión de ortodoncia de tu hijo? ¿La has realizado ya? Los ortodoncistas españoles advierten que las revisiones ortodóncicas a los 6 años permiten corregir malformaciones de huesos y dientes y evitar la cirugía en la edad adulta.</p><p><a href="http://i1.wp.com/www.mamapsicologainfantil.com/wp-content/uploads/2015/10/8026178529 ...

niños tutoriales

Bien, una vez más trabajaremos con código HTML, muy básico y sencillo, como a mi me gusta !! Este tutorial me lo he planteado a la hora de añadir una descripción ( en mi caso un agradecimiento ) después de mi cabecera de blog,... Blogger no te da ninguna opción para darle formato a dicho texto, pero lo que sí admite son el uso de etiquetas HTML para poder hacerlo, bien las etiquetas serían las sig ...

niños código html tutoriales

Cómo puedes ver en el blog a mi me encantan las líneas rectas, más bien finitas... así que hoy me toca hablar de cómo hacer unas cuantas en los posts ! ; ) A mi me parecen muy útiles para separar o resaltar palabras, párrafos, o incluso el título del post (si sitúas el código justo debajo), además le dan un toque muy personal y elegante que sin duda mejorarán el diseño de tus posts ¿ no crees ? B ...

Código HTML Tutoriales

Hoy te voy a mostrar cómo puedes incorporar texto e imágenes en movimiento en Blogger muy fácilmente. Hoy te voy a mostrar cómo aplicar este tutorial en Blogger, pero podrías aplicarlo igualmente en tu sitio web esté o no en esta plataforma, para ello simplemente tendrías que colocar el código html que te voy a a proporcionar en el lugar adecuado. Lo primero por lo que empezaré es por comentarte q ...

looks Maternidad Mini ...

Esta es la mochila que nos acompañará este curso… A la peque le encanta Gastón (la mascota “mariquita” de unos dibujos animados), así que cuando vio esta mochila ya no había manera de convencerla con ninguna otra.Luego yo me volví loca con el pack completo, jjjj. Bolsita para el almuerzo, botella, babero y cubiertos para casa…, jjjj Me habéis preguntado mucho por el tamaño de la mochila así que en ...

general

De la mano de dos blogs amigos  Pequeboom y Pipo Pepe y Papá  me llegó este premio “Yo soy una súper mamá” tengo que agradecerlas por acordarse de éste humilde blog y querer compartirlo conmigo, verdaderamente hacéis que cada día como mamá sea diferente y aportáis una nota de humor y color al día día, gracias por leerme y apoyar la iniciativa que organiza Ainara del blog Piezecitos. Si ...

Juegos y material educativo Diset Material educativo

Seguro que como madre o padre implicado en el desarrollo integral de tu hijo estás deseando ayudar a tu peque a aprender. Y deseas hacerlo de manera positiva, divertida, y a su ritmo. Sin presiones, para que desarrolle todo su potencial sin lastimar su autoconcepto y autoestima, alejándote de métodos antiguos y pedagogías obsoletas. Y si es así, estás en el camino adecuado. Te explico cómo vas a p ...

niños código html tutoriales

A la hora de hacer tutoriales,de mostrar páginas webs que nos gustan,.... los pantallazos se suelen convertir en nuestros grandes aliados... ¿ o no?. Bien, hoy quiero ir un paso más allá y mostrarte otra forma de presentación, muchos más dinámina, que podrás usar en algunos casos (especialmente en aquellos en los que en el pantallazo no te entre toda la información visual que desees recoger), sien ...