How to Lay Out Side by Side Photo in a Blogger Post?

In my previous post on the subject, I had talked about the basic phenomenon by which pictures are put side by side in a post. Now here, we will go a step further and discuss as to how Side by Side Photo can be laid with the help of HTML code.

Laying Side by Side Photo

If you add/upload an image directly from blogger post editor, it will be automatically put in a div, and styled with “text-align:center”. The same default setting will also be applied to the second, third, fourth… image you add. Open your post editor and choose HTML mode (after you add some images), the codes will be similar to this:

The same default setting will also be applied to the second, third, fourth… image you add. Open your post editor and choose HTML mode (after you add some images), the codes will be similar to this:

<div style=”text-align: center”><a href=”imageurl”><img data-src=”imageurl”></a></div><div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a></div><div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a></div>

and so on…..

If you want to put the Side by Side Photo, simply remove the individual div tag covering every link/image tag, and cover the link/image tags with A SINGLE div tag

<div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a><a href=”imageurl”><img src=”imageurl”></a><a href=”imageurl”><img src=”imageurl”></a><div>

Check the result in Compose mode.

Please note that the images will be shown side by side IF your blog post width is bigger than the total width of the images and their styles.

If you want to give the same size to the images, simply add width and height values inside the image tag:

<a href=”imageurl”><img width=”200px” height=”100px” src=”imageurl”></a>

Or else, you need to re size the images before uploading them. Hope this geeky trick about putting Side by Side Photo will be useful. 🙂