How to put pictures side by side in Blogger

The Easy Way

0. a) Switch to HTML mode on the top toolbar.

b) then add pictures by clicking that 'insert picture' icon on the top toolbar.

c) select multiple pictures then 'Add Selected'.

 Blogger will put them side by side by default.



If you want the pictures to show up centered on the page, add a <div align="center"> ... </div> tag around that section of code.

Like this:

<div align="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtTRIJ8VVPtc3TOAx2i-kuM2NDt7Mextj0TInfpoNiS94O74h7Nz03CO5l_JfhiimBaQN12xxd-5qTp_hNpFEHGRHAUfurbYh-BZP4B14943aeoOhTNSku4PsU3YmFNNpGoOZxll2vTA/s1600/20160421_194546.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtTRIJ8VVPtc3TOAx2i-kuM2NDt7Mextj0TInfpoNiS94O74h7Nz03CO5l_JfhiimBaQN12xxd-5qTp_hNpFEHGRHAUfurbYh-BZP4B14943aeoOhTNSku4PsU3YmFNNpGoOZxll2vTA/s320/20160421_194546.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBuhu4NbdcQY3jyuvJECMIY6SwjV4CHp6sdPLdsFGloCCJq4BexiG-OfQTSbMXzl7oN4GSUneE9xAqkI6wZZhUwJwIrbPLW-aqA9KF20K1Yjmpaj9KBjVTulrq90JFm0QXG_zILquXcAI/s1600/20160421_193830.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBuhu4NbdcQY3jyuvJECMIY6SwjV4CHp6sdPLdsFGloCCJq4BexiG-OfQTSbMXzl7oN4GSUneE9xAqkI6wZZhUwJwIrbPLW-aqA9KF20K1Yjmpaj9KBjVTulrq90JFm0QXG_zILquXcAI/s320/20160421_193830.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp3tTTNrBBVTWv4PHT-noqb-89TzWbZNEzJ8-aNqRWRtXySvqS1kgBNnVEsi3LDuD55zBR-4yJ82wo1PHWkLcvZzw7MFVBqAOCnCttrySNNBPjBC9QDVPGieIZk-1utG20eT9wnmw4JVU/s1600/20160421_193622.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp3tTTNrBBVTWv4PHT-noqb-89TzWbZNEzJ8-aNqRWRtXySvqS1kgBNnVEsi3LDuD55zBR-4yJ82wo1PHWkLcvZzw7MFVBqAOCnCttrySNNBPjBC9QDVPGieIZk-1utG20eT9wnmw4JVU/s320/20160421_193622.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05MnLUr7doO9ptv2G_77wD8uOdZsdtJu1slkKcVASjzFphASJf3XXJmxMABKeL2PMcmXUUy9YISYF4MJt9V4In-3EKlF-liTK_jO4sLtgRmJBlTedlutwFY1N3flLk-Ye4xXymTCJbMM/s1600/20160421_193441.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05MnLUr7doO9ptv2G_77wD8uOdZsdtJu1slkKcVASjzFphASJf3XXJmxMABKeL2PMcmXUUy9YISYF4MJt9V4In-3EKlF-liTK_jO4sLtgRmJBlTedlutwFY1N3flLk-Ye4xXymTCJbMM/s320/20160421_193441.jpg" /></a>
</div>

The Fancy Advanced Way

If you want to remove the borders and put the pictures slightly closer together, like this:

add the following code anywhere within the <img ...> tag:

style="border: none; box-shadow: 0px 0px 0px transparent; margin: -0.55em;" 

like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s1600/20160424_102819.jpg">
<img style="border: none; box-shadow: 0px 0px 0px transparent; margin: -0.55em;" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s320/20160424_102819.jpg"  width="320" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s1600/20160424_101855.jpg">
<img style="border: none; box-shadow: 0px 0px 0px transparent; margin: -0.55em;" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s320/20160424_101855.jpg"  width="320" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s1600/20160424_101852.jpg">
<img style="border: none; box-shadow: 0px 0px 0px transparent; margin: -0.55em;" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s320/20160424_101852.jpg" width="320" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s1600/20160424_101630.jpg">
<img style="border: none; box-shadow: 0px 0px 0px transparent; margin: -0.55em;" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s320/20160424_101630.jpg"  width="320" /></a></div>
<br />

Remember to separate style statements inside "quotation marks" with a semicolon ';' or they won't be recognized.

The 'border:none' gets rid of the border around the pictures, but not its shadow. So we need the 'box-shadow: 0px 0px 0px transparent;' too.

You can adjust the margin size: 'margin:-0.55em' to change the spacing between pictures. Or if you want to tweak each margin individually, use this for example:

style="margin-bottom: -0.5em; margin-left: -0.5em; margin-right: -0.5em; margin-top: -0.5em;"

I think to get rid of the margins completely, you would have to edit the CSS style for your whole blog or set up a custom CSS rule for each post... I'm guessing 'cause I haven't tried that. This method works good enough for me.


The Stupid Way

Sometimes the HTML code is too messy to understand. Like one time, I added a hundred pictures then couldn't tell which pictures were which if I wasn't using Compose mode... So...

If you want to insert pictures in Compose mode, and want to fix it afterwards, you can do that too.

1. In compose mode, add pictures by clicking that 'insert picture' icon on the top toolbar.

2. Select multiple pictures then 'Add Selected'.

3. Pictures are stacked one on top of another like this:

4. Switch to HTML mode on the top toolbar.

5. You'll see a bunch of text that looks like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s1600/20160424_102819.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s320/20160424_102819.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s1600/20160424_101855.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s320/20160424_101855.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s1600/20160424_101852.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s320/20160424_101852.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s1600/20160424_101630.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s320/20160424_101630.jpg" width="320" /></a></div>

6. Delete the following text from the HTML code, as highlighted below.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s1600/20160424_102819.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOIQhxACpCBsKNkkCzGjo-dzdx60ywcCyOAfZ_AzfVey4O64_RuGFwpJCcCnW8HFqm5-GwqMWEAzqJyLr5JK_agCRSHrxCA4i5HUlYAGs3yn4wE_oXX4QbhFVbcElBwiWtU5LaRO8ffI/s320/20160424_102819.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s1600/20160424_101855.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDwJfYhZ_tLVY2pe7XfGyAoZVckbKjXnmoPM42OqLoiA3xLbgsioADkC2RJnD11rm4IS5acJDHVsKdhj0p_iN_NB5ic6sofVPqpbEGOHeNafq1of41jBU3RU-1j9CTkg55pHN6lTcmmg/s320/20160424_101855.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s1600/20160424_101852.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzT6IiCk-uaHGpyAkNlPWp3ZOF2o8HXUb3EKJwp9eFvs5Td9-TINYf9sGO48OSGgbZwUkiSLkeWyiiySes-Y-c56N05hOolLxUKZ9TqEDcwoGeL1Uyt-YebfB0TQJ_xDSWyzVQv_LiMMY/s320/20160424_101852.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s1600/20160424_101630.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNxHCFc9yUNzpgTRFHCgxEbaFSxMytCz0yQP8qiDZs57KDTLH-KQ_J_e_R5BgEYI9AUMdYfCuTtoVbU52XXS5-IKoHa4RwGV7quFTx9FuTjLVVlK2ol9KrPzTK0FyPGMKmM15znOwRlc/s320/20160424_101630.jpg" width="320" /></a></div>

The yellow text puts vertical spaces between the pictures. The green text creates horizontal gaps when pictures are side by side. Those gaps causes medium sized pictures not to fit on the same line, so get rid of both the yellow and green text.

7. Now switch back to Compose mode on the top toolbar. Your pictures should look like this: