How To Place Images Side By Side In Blogger?

Croben.com Side By Side Images In Blogger

Adding images in Blogger is easy, but formatting them can sometimes get tricky. One of these tricky formats is placing two images side by side. To achieve this, you need to go to the HTML view and write some code. So I’ve written a step by step guide on how you can place images right next to each other.


Step 1: Switch the view from “Compose” to “HTML”

Side By Side Images In Blogger Step 1


Step 2: Copy and paste the HTML template below into your “HTML view”

<!--Side By Side Image Template STARTS Here-->
<div>
<!--To remove the border you can change the value to 0 or simple erase it-->
<!--Adjust the spacing by changing the values of cellpadding & cellspacing-->
<!--For smaller images you can remove style="width: 100%;"-->
<!--Input additional <td> </td> for 3 or more images-->
<table border="1px" cellpadding="0px" cellspacing="5px" style="width: 100%;">
    <tbody>
        <tr>
            <td>
                (Your Image Here)
            </td>
            <td>
                (Your Image Here)
            </td>
        </tr>
    </tbody>
</table>
</div>
<!--Side By Side Image Template ENDS Here-->


Step 3: Put the cursor in the middle of an empty “<td>” and  “</td>” of the template

Side By Side Images In Blogger Step 3


Step 4: Click on “Insert image“ and upload one image

Side By Side Images In Blogger Step 4


Step 5 (Optional): Change the image “width” to 100%

Side By Side Images In Blogger Step 5


Step 6: Repeat steps 3 to 5 for the other empty “<td> </td>”

Side By Side Images In Blogger Step 6


Step 7: Switch back to “Compose view” to see the result

Side By Side Images In Blogger Result


-End


Social Media & Contact

Croben Facebook Page
Croben Twitter Page
Croben Youtube Page
Croben Instagram Page
Croben Contact Page

Comments