How to Align Photos in Blogger

Let's face it, Blogger is not always the easiest thing to make look how you want it, so I've put together some instructions as to how to make the photos line up all nice and not be randomly strewn across your blog :)

 First I upload the pictures I want into blogger. And then you will need to click the HTML button and view your blog that way.

Once there, it should look something like this, minus the highlighting.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s1600/Harry Potter Premier.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s320/Harry Potter Premier.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s1600/Circle Skirt.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s320/Circle Skirt.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>

 Next you will want to go to the bottom of the text and enter this code. You can simply copy and paste it from here.

<table>
<tr>
<td><img src="URL" width="350" /></td>
<td><img src="URL" width="350" /></td>
</tr>
</table>

Once you've done that you will copy the blue highlighted part from the first section and paste it over the yellow highlighted part. The blue highlighted part is the URL for your photo. It will start with http:// and end with .jpg. 

When you are done, the bottom part will look like this:

<table>
<tr>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BCsdB1jRw2GK2T8sNKwtxMl0UYO5xFgEu7Ggt1RyJz8o6rKeUtbcG2FeQrDUFXm1qglRxQjwGoFH71e_LHpfsNwqU0LwLqDIwJui4UNL3uS6f-iAc-ZcGpPOZ2ZYsSjdoDs8Bzh-9A4/s1600/Harry Potter Premier.jpg" width="350" /></td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQSCyWfBwmI5FFJtaW6IehmNPvIbFT2bhOaIAFfggoQtnNCtMe4FGsDsBzadcvdbcpWOxFVfPfIYj1wodNCzApD0J1pVxo6C_axBcSuMMP7M0oXiUsQlgiDhSlXkQx6oz0EoYyPikKqE/s1600/Circle Skirt.jpg" width="350" /></td>
</tr>
</table>

Once you've copied and pasted, you can delete the original html from the uploaded photos, otherwise you'll have double photos. 

The size of these photos is specific to my blog, so if the photos are either too big or small you can adjust them in the HTML where it says width="350". Just change it until you get it how you want. I go back and forth between preview and the post.

Also, if you want more than two photos next to each other, you need to copy the purple part and paste it right below it. The original code only had two spots for photos, and this one is for three. You can do as many as you'd like, you'll just need to change the width, so they all fit.

<table>
<tr>
<td><img src="URL" width="350" /></td>
<td><img src="URL" width="350" /></td>
<td><img src="URL" width="350" /></td>

</tr>
</table>

Also, I keep a word document of all of the helpful HTML codes, so that next time I don't have to go find the post, I can just copy from the word document and go from there. If you have any questions let me know, and I hope this works for you!!