How to Align side by side Photos on Blogger

Published by kelvin Ehiozefe on

Hello friends, I got something new to share with you. If you are very familiar with Blogger or have a blog with you understand how complex it could be trying to align two or more photos side by side in a blog post. In order to make your post more navigation friendly for readers. Are you in that situation? Take a deep breath I got the solution.

The use of images on a blog post helps to makes our post more readable and explainable. The more photos you use in a blog post, the easier it is  for your blog readers to understand your message;

METHOD 1 Aligning images side by side on Blogger

Step 1
Before we begin you need images, upload all your photos on blogger and save, for every saved image Blogger will attach a unique URL–this will be required later on as we progress. To get the URL of your photo go to where you have stored the photos right-click on your mouse a light-box will appear, scroll down to where you have “copy image link” and click.

Step 2
welcome to the finish stage for method 1 in aligning images side by side on Blogger. So easy right! Now, for the final step add the following html code;




add image 1 url here” border=”0″ width=”250″/>


<td><img src=“ add image 2 url here”border=”0″ width=”250″/></td>




Step 3
You can Edit the image width to your choice <width=”500 or more”>

This should be your Result:

Aligning image on blogger

Note: you can also link your images to internal or external page by adding the following code;

<a href=”page link”><img src=”image url”>


This method may not be very simple as method 1 but it thus works excellently for the purpose of this tutorial.

1 Add code to your post:

<img src=”add image url here” style=”float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;”>
2 Repeat the code for every new photo without skipping line or spaces

3 After your last photo add the following code to stop the flow: 

<p style=”clear: both;”>

you can also link your images to internal or external page add <a href=”page link”> before <img src=”image url”>. 

4 To add more images with method 2 simply divide 100% by the number of images you want to add. This gives you the width of the image and its margin-right. You should now decide how much of that amount you want to be for the image, and how much you want to be the margin.

Like this:

Three images across: 30% + 1% times 3 = 99%.

Four images across: 23% + 1% times 4 = 96%.

Five images across: 19% + 0.5% times 5 = 97.5%

Voola!!! we are done you can go on now start aligning your post images to make your posts more navigation friendly for your readers. if you run into trouble implementing this code leave me a comment in the comment area. I hope I did well with this. you should share this post with friends!!!


hotmail login · July 31, 2018 at 9:27 am

thanks you sharing

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

%d bloggers like this: