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/AVvXsEiK3F2OvwIvDU-c_KRf8kwaG2b8Eth0CwNsKj85a93lZKMb903OpV1MEfi6n_IqQP9cQglaeEC94chIlceE9XUzO96t-7KdpCGd0panrBPftgdmNRciDvFj3ULS_rRwrx5GbJWthqygNqUv/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
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:-
- Go to 'Layout'
- Click 'Add a Gadget'
- Select 'HTML/Javascript' gadget
- Paste code
- And save
Wow bhai mujhe tera template Pasand aaya please mujhe bhi dede ye same.🙏🙏🙏🙏
ReplyDeleteBro, I'm using "Magify Premium Blogger Template".
DeleteSir aap ki web site bahut ashi he par esame adsense nahi he ?
ReplyDeleteThis blog is adsense approved bro but because of invalid click I turned off ads on this blog.
Deletesir your blog is very nice but why you have not display ads.
ReplyDeleteThank-you
DeleteHow to add "Live Preview" and "Download" button in Blogger.
ReplyDeletePlease Reply!
Bro, In your theme documentation, find shortcut codes, from there you can get download button code
DeleteHi, it is very good post. But display ads sir.
ReplyDeleteThis blog is Adsense approved bro but I turned off ads because of invalid clicks, I don't know why people are clicking on ads for no reason.
DeleteSir give some tips to increase traffic on my blog
ReplyDeleteUse Quora, Medium and Social Media Platforms to drive traffic on your blog.
DeleteBro where will u generate images for your blog
ReplyDeletePlease advise us
DeleteI'm using PIXLR for my blog images
Deletethanks. your blog help will to startup blogger.
ReplyDeletePleasure is all mine brother
DeleteWhy feature image is not showing in this theme? ANy solution?
ReplyDeleteThe feature image is not showing in this theme
ReplyDeleteany solution?
Bhai Mai bhi Aman app bhi Aman to kya app mujhe magify premium theme de sakte ho. Mai ek student hu mere pas paise nahi hai pls help mee.
ReplyDeleteBrother, you can easily get this theme online. Lots of websites are providing it for free if you want it from me just reached me out by contact page and i will mail you back.
DeleteMay I know,how to make the table center?
ReplyDeletePost a Comment