How To Put Picture Side by Side in Blogspot or Blogger?

Pin It

Hi blogger out there, sometime we have pictures or photos to insert into our blog posting, however you should noticed that the pictures or photos cannot be placed side by side, and I did try to changed the setting during uploading the pictures to blogger, but it didn't help at all! After some googling, I found out that the option to place pictures side by side is not available in control panel for unknown reason. The easy part is to do HTML coding. 'HUH? how am I going to do that?!' you might have this thought, don't worry, this is very easy. For those already have experience with HTML, this is piece of cake! You can either use free image hosting site or upload the picture first to blogger and then make the HTML code changes, your choice.

Okay, lets go do it!

Method one - host your image from image hosting site



Step 1
Go to your blogger dashboard and create post, usually it will automatically in Compose mode. Click on HTML tab to see in HTML mode, it is because the Compose tab. It is at the right hand side, just above the tool section.

Step 2
Copy and paste the following code into the HTML tab:
<table><tbody> <tr> <td><img src="insert your picture/photo link here" border="0" /></a></td><td><img src="insert your picture/photo link here" border="0" /></a></td></tr> </tbody></table>

Replace the "insert your picture/photo link here" here with your own link.
Example:
<table><tbody> <tr> <td><img src="http://www.google.com.my/images/nav_logo6.png" border="0" /></a></td><td><img src="http://www.google.com.my/images/nav_logo7.png" border="0" /></a></td></tr> </tbody></table>

Step 3
Now you can check the images by clicking on the Compose tab. Or use the Preview link, which is just below the Compose tab.


Method two - host your image from blogger/blogspot

Step 1
Same as Method one stated above, but instead of uploading the photo to image hosting site, upload the photos/pictures to blogger first. Go to HTML tab, you will find some code looks like below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3_J7oSIXeyL7Hp0gKMa66o65sz8aMdZ1y02ekQbIOiSbGJTM75N2c5V6yjc3llG-CHxttjNopR4h2ap7E7cH4-I72r0r3s8Ahva6wnyGM4j7ufoUegkeqLHPDhvb29oV6eTuC0A2Qc6q/s1600-h/DSC_4652_edit2.jpgxyz"><img style="cursor: pointer; width: 79px; height: 77px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3_J7oSIXeyL7Hp0gKMa66o65sz8aMdZ1y02ekQbIOiSbGJTM75N2c5V6yjc3llG-CHxttjNopR4h2ap7E7cH4-I72r0r3s8Ahva6wnyGM4j7ufoUegkeqLHPDhvb29oV6eTuC0A2Qc6q/s400/DSC_4652_edit2.jpg" alt="" id="BLOGGER_PHOTO_ID_5432092158227302002" border="0" /></a>

Step 2
Copy the link right after the first "href="" until the next """ and put it into the table that I showed in Method 1.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3_J7oSIXeyL7Hp0gKMa66o65sz8aMdZ1y02ekQbIOiSbGJTM75N2c5V6yjc3llG-CHxttjNopR4h2ap7E7cH4-I72r0r3s8Ahva6wnyGM4j7ufoUegkeqLHPDhvb29oV6eTuC0A2Qc6q/s1600-h/DSC_4652_edit2.jpgxyz


Note:
1. It is always good to insert the pictures/photos first and then write your blog post, because it can be very tricky to look at the HTML code once you have start writing it.
2. It can be quite confusing, especially if you are not familiar with HTML, and errors can make the whole post unreadable, so please help yourself by start with inserting photos/pictures first and then compose the post.
3. A few time of trying definitely will get yourself more familiar.


Finally, publish your post!

Good luck! :-)


p/s: for more tutorial on this blog, click here
Hope you will enjoy this post, subscribe to my RSS or mailing list or follow me on blogger or twitter. :)