How to Align Images in Blogger

I like Blogger - for the fact that it is free - and it can also host ads unlike the free version of Wordpress however it can be quite frustrating at times - I am probably guilty of swearing under my breath as I try for the umpteenth time to align pictures in my post, or line up pictures beside text and it just does not go the way I want it to.

So how can you align everything up straightly and evenly in Blogger - without driving yourself mad?

By using tables in html. You may be saying I have absolutely no idea how to use code, or the first thing about html - but it is simple and it's pretty much jut copying and pasting it and soon you will be a pro! Or at least get the basic understanding of it and actually accomplish what you were trying to do.

So there are only two main parts to a table the columns <td> and the rows <tr>

So to create a simple table you will need to open and close each aspect so for instance...

<table style="width: 100%;">
<tr>
<td> this is text </td>
<td> this is column 2 </td>
</tr>

<tr>
<td>And this is row 2 </td>
<td> Row two column 2 </td>
</tr>

</table>

this is text	this is column 2
And this is row 2	Row to column 2

Okay this might be confusing at first but it does get easier. You can try it out on a draft post and copy the above html - switch the compose button in the top left to html and paste it.

Now hopefully it worked. If all you want to do is line up text - then you are done you can add as many columns as you would like by adding <td> your text here and closing it </td>

Now if you want to add images and you probably do then instead of the text you will have to add the html code for the image source. You might be asking where do I find this? And the easiest way is to open up a blank draft post and simply insert the image as you normally would - switch it back to html and voila there is the code you wanted.

Now get rid of all the excess around the code and just get the image code which will look something like this:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFEL2V4s2YrWUBwnlsQ6u8lBKkZ-5RtuYDRQzhQx2w0XE68pUlZ7x-5moPrFX6XPGdPIKLuwp2oa_4-3DmJ0uGXVYB6Ey0_UTtofgpRjQu2kcso68f1l_p6s20eB62B_v0oyC9UGYqGFiq/s1600/HowtogetNoticedatLinkParties.png" height="180" width="180"/>

It will start with <img ..... > and end with a closing tag -a sideways V - sorry don't know the actual lingo.

Now copy that image code where the texts was and you can align your images.

So the below code look like this:
<table style="width: 100%;">
<tr><td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lwx-YnjKn1PwwR2dBr95P2lG_tPFRRQlavc6I5jS8MFKZJSOuYnai_rtujNlHQydaE8Dukw0_I3UIT5_k-kFSOy5s_yFS2tnmyMfHy6CtqDkM0xmgZvOk5qWLzQH1pnM4duNfFkI4JB6/s320/Pinterest+for+new+bloggers.jpg" height="180" width="180" />
</td><td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFEL2V4s2YrWUBwnlsQ6u8lBKkZ-5RtuYDRQzhQx2w0XE68pUlZ7x-5moPrFX6XPGdPIKLuwp2oa_4-3DmJ0uGXVYB6Ey0_UTtofgpRjQu2kcso68f1l_p6s20eB62B_v0oyC9UGYqGFiq/s1600/HowtogetNoticedatLinkParties.png" height="180" width="180" />
</td><td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1HiqNKSdPj8F0nSTBOK1GenIh_1ru_zTm7RdhjXX9bHmjKTA1b1cgfQh8NWrYSucz6K39V_KH2eignxe46kVHxAeNVr_K5uH30dQlUED2JGzkGrxbli8VI1tKhHfzVF7VAbvnQ5Raiww/s1600/AffilliatesReview.png" height="180" width="180" /><br />
<table style="width: 100%;">
</table>
</td></tr>
</tbody></table>

Which will look like this...


You can change your image size by changing the width and height in pixels so...

<img src=http://blogspotyaddayada.com/123.png height="180" width="180">

You may need to play around with your sizes increase them by 10 or 20s until you get the right size the above images are 180 by 180 to give you some idea

And lastly you can adjust the table width:

The following is the same code as above the only exception is I changed
<table style="width: 100%;"> to <table style="width: 80%;">


And if you want to have a blank link between your tables or text it's simply <br> no closing tag needed. This will probably come in handy...

So just text <br><br> and more text will look like this...

So just text

and more text will look like this...


Well hopefully you are not t confused after all of that, I know the first time I tried anything I was a little overwhelmed but soon it becomes second nature totally doable.

If you have any questions feel free to leave them in the comments although I am no programmer I took a class once twelve years ago in high school and am mostly self taught but will try my absolute best to answer your questions.

Good Luck!