How to Align Images Side by Side in Blogger

When it comes to making a quality post or article, you can not make it without adding images. Not only an image will help you in defining complex concepts but also it gives a better look to your article
Tutes Inside- Align Images In One Line

If you are new at blogging then you should make articles with nice and related pictures in it. If you are using images in a right way then this will also increase traffic on your blog.
You can read more about it here:-


This article will help you in placing 2 or more images side by side. We are going to use HTML table for this purpose and by this method you can align images in posts as well as in blog.

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 image link just upload your images in post editor and then click on 'HTML' on top left. There you will see your image link somewhat like this:-

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5uw_n6kL_AQGf7-6Gkf_RRAn0ZIxZCwH3nerbcbGoPBWMQ3RhDw5Wrp9YqyRwWDQ2BBinolXTpoCmIDP-737xinvwIieGvhf8UUCI5FATPJYSVNThO9CsURbrBt95iRNhhyphenhyphenviGFJfQxc/s1600/Align+images+in+line.png

Okay, now you have your image links. Copy this HTML table code and paste it in HTML mode in 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:-

Preview Image 1
Image 1
Preview Image 2
Image 2
Preview Image 3
Image 3

Customize

  • You can change the size of 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 link to your image then click on your image in compose mode and then click on 'Link' in toolbar.

Align images in blog


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

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

You can always leave your issue in comments.

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

4 comments:

  1. Very nicely and easily explained
    How to add text, below those images, Please ?
    Thanks
    ie., top images and down text post

    ReplyDelete
  2. Thank you!!! This was so easy to follow. :)

    ReplyDelete
  3. Thanks Bro Your Explained Is Very Beautiful

    ReplyDelete
  4. Thank you so much! I was going mad and wasting a lot of time without results before finding your code!

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.