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://4.bp.blogspot.com/-PjNG_T_zcEM/WJBj-I2yyVI/AAAAAAAACUc/BCIq7-1fdfArzNUB0eXvA5jLagx_tAsagCEw/s1600/Align%2Bimages%2Bin%2Bline.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.
Previous
Next Post »
0 Comments
Don't forget to check 'Notify me' box to get notification of reply.