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

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

2
data:blog.title
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
How to Insert Images Side by Side in Blogger Blog post?
4 Stars stars - "How to Insert Images Side by Side in Blogger Blog post?" There are different kinds of Blog that vary according to their niche. Such as, personal blog, ...

Post a Comment

Thanks for Tips Bro! it is so useful for me.

You are most Welcome..We always love to receive our readers feedback.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *