Adding Multiple Image in Blogger
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:
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.
