Lining up pictures in blogger

I don't know about you, but I have awful trouble putting the pictures into blogger for the folksy friday posts. It's fine if you just want one on top of the other, but if you want 2 side by side it starts to throw a wobbly. Every week I patiently sit, tweeking things, not really sure what I'm doing, until quite by chance it happens to look ok.

Enough! I've just been putting together this friday's folksy friday post (keen I know!) and I reached the limit. Enough is enough. I gave in and ventured into the world of html, certain that there must be an easier and more reliable way.

Success! With a little bit of help from the etsy blog team (thank you thank you thank you), a large helping of patience and some serious stretching of my knowledge of html, I think I've cracked it :-) And just in case there is anyone else out there trying to do the same thing, I thought I'd share.

Here's the html code that you need to paste into your post (in the 'edit html' tab):

<table cellpadding="0" cellspacing="0"><tbody>

<tr>     <td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="LINK 1" style="margin-left: auto; margin-right: auto;"><img height="200" src="IMAGE 1" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;">CAPTION 1</td></tr>

</tbody></table>

</td>     <td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>

<tr><td style="text-align: center;"><a href="LINK 2" style="margin-left: auto; margin-right: auto;"><img height="200" src="IMAGE 2" /></a></td></tr>

<tr><td class="tr-caption" style="text-align: center;">CAPTION 2</td></tr>

</tbody></table>

</td></tr>

</tbody></table>

Nice isn't it?! Now all you have to do is copy the link of your first folksy friday item, and paste it where it says LINK 1. Then you copy the image url (just like you would for posting a pic in the folksy forum) and paste it where it says IMAGE 1. And if you want a caption underneath the picture, you write this where it says CAPTION 1 (deleting 'caption 1' otherwise this will appear in your caption). Then you repeat for your second folksy friday item, pasting the relevant urls in LINK 2 and IMAGE 2, and writing a caption at CAPTION 2 if desired. And you can paste the whole code again for items 3 and 4, and so on until you have your whole post. 

Now, the only tricky bit is adjusting the images so that they fit to the width of your blog. If you find that the images are too big and they stick out over the edge of the post, you need to adjust the size. To do this, find the bit in the html above that says:

<img height="200" 

Then reduce the 200 a bit, to say 150. You will need to do this for both pictures, unless you want them to be different sizes. Then click 'preview' to see if your pictures fit. If not, try a different number, until it looks just perfect. Obviously, if your pictures are a bit too small to start with, make the number bigger than 200. 

If you try this method, I'd be interested to hear if it works for you. I really only have very limited understanding of html and never thought I'd be posting about how to write it!