Add Multiple Image in Blogger using CSS Code

Adding Multiple Image in Blogger 

Use the code below, replace the "imageURL" with the URL of a photo you've uploaded somewhere on the web (if in blogger open the gallery, right click the image and copy the "image url link").

<img src="imageURL" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

Repeat this line of code for each image. I repeat in each line of code, you replace "imageURL" with the URL of the photo.

IMPORTANT: For example if you are making 3 images in a row, After your third last image, add the following code:

<p style="clear: both;">

It should look like these below:

Case 1: For three images horizontally

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

<p style="clear: both;">

I added border="1" into the code to make each image much more visible. Adding a border is optional.

Case 2: For four images horizontally:

<img src="imageLocation" style="float: left; width: 20%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="imageLocation" style="float: left; width: 20%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="imageLocation" style="float: left; width: 20%; margin-right: 1%; margin-bottom: 0.5em;">

<img src="imageLocation" style="float: left; width: 20%; margin-right: 1%; margin-bottom: 0.5em;">

<p style="clear: both;">

These could be your guide in adding your images width: 

• Three images horizontally: 30% + 1% times 3 = 93%.
• Four images horizontally: 23% + 1% times 4 = 96%.
• Five images horizontally: 19% + 0.5% times 5 = 97.5%

In my example above I use the width: 20% for case 2 to fit the images on my body, you can also adjust the width's of your images as you like but try to check them first in your front-end.

Great Thanks to this source.