Table of Content

How to Add Images Side by Side in Blogger

Learn how to add images side by side in Blogger with this easy step-by-step guide. This method works for both the old and new Blogger interfaces.
Blogger side by side image

Adding images side by side in Blogger is a great way to create visually appealing and informative blog posts. It can be especially useful for comparing and contrasting two different things, or for showing two different stages of a process.

To add images side by side in Blogger, you can follow these steps:

  1. Create a new post.
  2. Switch to HTML view. To do this, click the HTML button in the top right corner of the post editor.
  3. Upload your images. To do this, click the Insert image button in the toolbar. Select the images you want to upload from your computer and click Open.
  4. Insert the images into your post. To do this, place your cursor where you want the images to appear and then type the following code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <img src="https://example.com/image1.jpg" alt="Image 1">
    </td>
    <td>
      <img src="https://example.com/image2.jpg" alt="Image 2">
    </td>
  </tr>
</table>

Replace the https://example.com/image1.jpg and https://example.com/image2.jpg placeholders with the actual URLs of your images.

  1. Switch back to Compose view. To do this, click the Compose button in the top right corner of the post editor.

  2. Preview your post. To do this, click the Preview button in the top right corner of the post editor.

  3. Publish your post. When you're happy with your post, click the Publish button.

Explanation of each line in detail:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

This line creates a table that is 100% wide, with no border, cellspacing, or cellpadding.

  <tr>

This line creates a new row in the table.

    <td>
      <img src="https://example.com/image1.jpg" alt="Image 1">
    </td>

This line inserts an image into the table cell. The src attribute specifies the URL of the image, and the alt attribute specifies the alternative text for the image.

    <td>
      <img src="https://example.com/image2.jpg" alt="Image 2">
    </td>
  </tr>
</table>

This line inserts the second image into the table cell, and closes the table row and table.

Once you have added the code to your post, you can switch back to Compose view and preview your post to see how the images look. If you're happy with the way the images look, you can publish your post.

Post a Comment