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
Okay, now you have your image links. Copy this HTML table code and paste it in HTML mode in post editor.
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>
<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:-
|
|
|
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.
Very nicely and easily explained
ReplyDeleteHow to add text, below those images, Please ?
Thanks
ie., top images and down text post
Thank you!!! This was so easy to follow. :)
ReplyDeleteThanks Bro Your Explained Is Very Beautiful
ReplyDeleteThank you so much! I was going mad and wasting a lot of time without results before finding your code!
ReplyDelete