Sunday, September 13, 2020

How to Put Images Side by Side in Blogger (Easily)

How to Put Images Side by Side in Blogger (Easily)

How to Put Images Side by Side in Blogger

Do you want to put images side by side in your Blogger content?
Often beginners struggle to find how to put two pictures next to each other in their Blogger posts and pages.
In this step by step guide, we will show how to easily put images side by side in Blogger
We are going to use an HTML table for this purpose and by this the method you can align images in posts as well as in blogs.

Aligning Images in Post


First thing first, copy all your image links in a notepad file or any text document editor you have. To grab the image link just upload your images in the post editor and then click on 'HTML' on the top left. There you will see your image link somewhat like this

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihaHDGENS1GyV6B9B5QghzaKQIaFz_4DkSbskaSSCzHrWoj1HBnc1FXPiNUYrNuCjAC0pERv5p3z-ujYIhn-tWnhSTunqAYIYHzTXwghQ5od2SDslv5C8Z4UssH77TY66tTvwZLJhWCg4g/w640-h396/images-side-by-side-blogger.jpg

Okay, now you have your image links. Copy this HTML table code and paste it in HTML mode in the post editor.

<table>
  <tr>
    <td><img border="0" width="
100px" height="100px" src="IMAGE 1 LINK HERE" /></td>
    <td><img border="0" width="
100px" height="100px" src="IMAGE 2 LINK HERE" /></td>
    <td><img border="0" width="
100px" height="100px" src="IMAGE 3 LINK HERE" /></td>
  </tr>
</table>

That's it. Now, your images will appear side by side in your blog post. See the code working here
Image 1Image 2Image 3

Customize

  • You can change the size of the image by changing the value in height and width. 
  • If you want to add more images in one line then just copy and paste the <td> code.
  • If you want to add a link to your image then click on your image in compose mode and then click on 'Link' in the toolbar.

Put Images Side by Side in Blog

If you want to align 2 or more images in your blog on the homepage then just copy the code above and paste it in 'HTML/Javascript' gadget.
Don't forget to change the links in the code.

If you don't know how to add this gadget then follow these steps:-
  1. Go to 'Layout'
  2. Click 'Add a Gadget'
  3. Select 'HTML/Javascript' gadget
  4. Paste code
  5. And save

I hope you successfully Put Images Side by Side in Blogger blog posts to make your articles look more professional. If you liked this article then do share this with your friends and if you have any queries or doubt regarding this article then drop a comment in the comments section below, I will get back to you with a new article till then stay tuned.

No comments:

Post a Comment

Free Blogger Templates For 2020

Free Blogger Templates For 2020  Find the best free blogger templates for all type of niche. Once you have chosen Blogger as your...

Popular Posts