How to put images side to side on your posts

This tutorial works on any blogger theme.

Using side-to-side images on your posts can give a nice design for your blog. Take a look on a post of Anna, from The Anna Edit: My Thoughts on Being a Blogger & Consumerism.
You will need some patience if you don't have familiarity with html code, but I highlighted the important parts to make this easy for you. The key of this tutorial is divide 100 by the number of images you want display.

The first step is upload your images on your post to host and get a url link for them. I always host my images on post blogger itself to avoid troubles with blogger thumbnails. With the upload completed, switch to HTML tab, where we'll go set up the side-to-side images.

Once switched to html tab you'll see the URL images you've uploaded, inside on a separator code. Usually, is one separator for each image. The image's URL are displayed duplicate inside the separator. We will use these URLs, not the images themselves.

Example of how the uploaded images look on HTML tab.

Using 2 images:

<table><tbody><tr><td width="50%"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-ukpTFVSbrx0/W07pZlQs9JI/AAAAAAAAah0/CEaUVBqajo4k84MuDJ4Zlmp1VP8owu1tACLcBGAs/s1600/bolsa-oaess-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1281" data-original-width="1200" src="https://1.bp.blogspot.com/-ukpTFVSbrx0/W07pZlQs9JI/AAAAAAAAah0/CEaUVBqajo4k84MuDJ4Zlmp1VP8owu1tACLcBGAs/s1600/bolsa-oaess-2.jpg" /></a></div>
</td> <!-- END IMAGE 1 --> <td width="50%"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-JOKOUY978qU/W07pl67Z3nI/AAAAAAAAah4/-Yr62kWbAZgcbXFxYpsdlpuA9Raayf5dQCLcBGAs/s1600/bolsa-oaess-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1281" data-original-width="1200" src="https://1.bp.blogspot.com/-JOKOUY978qU/W07pl67Z3nI/AAAAAAAAah4/-Yr62kWbAZgcbXFxYpsdlpuA9Raayf5dQCLcBGAs/s1600/bolsa-oaess-3.jpg" /></a></div></td> <!-- END IMAGE 2 --> </tr></tbody></table>
Paste the above code on your post, always on HTML tab.
Understanding the code:
In orange, we are dividing 100% for 2, which is 50%.
In blue, we have the first image.
In pink, we have the second image.

All you have to do is replace the indicated part of the code with your url image on both fields: each image should be pasted twice. Be careful to not delete any quotation marks.


Using 3 images:

<table><tbody><tr> <td width="33%"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-7LHSsfNTPLg/W07t98PimNI/AAAAAAAAaik/5Y2s8_OcbmQilQ675m5sYGuNl-B_w_WMwCLcBGAs/s1600/bolsa-oaess-9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1200" src="https://3.bp.blogspot.com/-7LHSsfNTPLg/W07t98PimNI/AAAAAAAAaik/5Y2s8_OcbmQilQ675m5sYGuNl-B_w_WMwCLcBGAs/s1600/bolsa-oaess-9.jpg" /></a></div></td> <!-- END IMAGE 1 --> <td width="33%"><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-gZv2NRvqDVM/W07uHR3pk_I/AAAAAAAAaio/ixO-0jn72BAXY_06KZzaFvE6xhgmSpO5ACLcBGAs/s1600/bolsa-oaess-10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1200" src="https://2.bp.blogspot.com/-gZv2NRvqDVM/W07uHR3pk_I/AAAAAAAAaio/ixO-0jn72BAXY_06KZzaFvE6xhgmSpO5ACLcBGAs/s1600/bolsa-oaess-10.jpg" /></a></div></td> <!-- END IMAGE 2 --> <td width="33%"><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-42pZufhRvBI/W07uUyXCtcI/AAAAAAAAaiw/xmojTE1VdPQJof1_LZ3xP82aEmqFzvqWACLcBGAs/s1600/bolsa-oaess-11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1200" src="https://3.bp.blogspot.com/-42pZufhRvBI/W07uUyXCtcI/AAAAAAAAaiw/xmojTE1VdPQJof1_LZ3xP82aEmqFzvqWACLcBGAs/s1600/bolsa-oaess-11.jpg" /></a></div></td> <!-- END IMAGE 3 --> </tr></tbody></table>
In this case are 3 images, so we are dividing 100% for 3, which is 33%, nearly.

_____


I hope this article is clear enough (:
I also know that deal directly with codes can be a little hard, but I trust the use of different colors have make things easier.
Feel free to ask me any question you have and clear up something, on the comments below.
Happy blogging!

Comments

Contact Form