Home
Blogger

How to Insert Images Side by Side in Blogger Blog post?

How to Insert Images Side by Side in Blogger Blog post?
tricks

There are different kinds of Blog that vary according to their niche. Such as, personal blog, Photography, News, Technology Blog etc. There are many Blog creating for Mobile or Laptop review with details information about latest model and older model mobile, laptop or any other product. For comparison this is often required to place 2/3 images side by side.

If you are a Blogger with little knowledge you would see that you can't place 2/3 Two Adjacent Parallel Images. So this is really not good for those kinds of Blog who wants to place image side by side.

So we have to find a solution that how we can add images side by side. Previously I have shared with you about to create Table in Blog post by HTML coding. Similarly In this post I will use table code and place Image. I will show you a simple trick where we can place 2/3 images easily by the help of HTML code.  

Method 1: How to Add Two Adjacent Parallel Images?

Actually this readymade code just you have to replace Image URL only. So just follow the below steps-

Step 1 Sign in to your Blogger account and go to Dashboard

Step 2 From the Dashboard, click New Post.

Step 3 Just create a New post and compose your post.

HTML view

Step 4 And from Post Editor Select HTML view. Now add any table code from below.
 
nokia
Nokia 
iphone
Iphone
 
<table>
<tr>
<td>
<a href="Image URL Here" imageanchor="1"><img border="0" src=" Image URL Here"/></a>
</td>
<td>
<a href="Image URL Here" imageanchor="1" ><img border="0" src="Image URL Here"/></a>
</td>
</tr>
</table>
  • In case of Three Adjacent Parallel Image use the below code
nokia
Nokia 
iphone
Iphone
blackberry
Blackberry  
 

 
<table>
<tr>
<td>
<a href="Image URL Here" imageanchor="1"><img border="0" src="Image URL Here"/></a>
</td>
<td>
<a href="Image URL Here" imageanchor="1" ><img border="0" src="Image URL Here"/></a>
</td>
<td>
<a href="Image URL Here" imageanchor="1" ><img border="0" src="Image URL Here"/></a>
</td>
</tr>
</table>
Step 5 Now switch to Compose view and resize image if you like. Finally Hit the Publish button for publishing the Blog Post.

You can check your Blog Post and see Images are placed side by side.

Customization

  • Replace Image URL Here with Image URL.

Method 2: Add Two Adjacent Parallel Images by Insert image option

In this method  you can directly insert Image from your Hard Drive directly. Just follow the step 1 to Step 3.

Step 4 And from Post Editor Select HTML view. Now add below table code.

 
<table>
<tr>
<td>
Image URL Here
</td>
<td>
Image URL Here
</td>
</tr>
</table>
Step 5 Now Block or delete Image URL Here and click on Insert image icon.

insert image

Step 6 A popup windows will open. After that select Image from your Hard Drive.

Step 7 Now switch to Compose mode and resize image if you like. Finally Hit the Publish button for publishing the Blog Post.

Customization

  • Replace Image URL Here by inserting Image from Hard Drive.
Hope this article will help you to insert and place images side by side. For any query feel free to write me. Thnaks

4 comments

  1. Thanks for Tips Bro! it is so useful for me.
    • You are most Welcome..We always love to receive our readers feedback.
  2. Before upload any image, we should compress the image first...
    • Image compression is good. But try to keep the image below 200kb. Thank you
Go Up