Using Tables for Gallery Creation in Blogger

My friend Chelsea has a pretty little Portfolio page on her blog. We put it together to show off her lovely parties (girl has talent). When you click on an image, it will take you to the post for that particular party. 

I've been getting more questions lately from you guys about how to put one of these together. You can  theoretically upload a bunch of images to your Page, add a caption to the image and hyperlink them up to the post that matches each image, but unfortunately it doesn't work reliably and often the photos are so misaligned that there's no hope of making it look decent.

Let's make this as simple as possible (because as my friend Chelsea said, her brain has a seizure when she looks at this stuff). I've tried to break it down as easily as I can, but if you still can't figure this out, we can create the page for you for a charge. Just shoot us an email here or on our Etsy shop.

First, grab this code. This is your base code, and will create your first row. You will want to hang onto this code, because each time you want a new row, you will paste this exact same code below whatever code you already have. 

Here's the explanation I quickly (ahem, horribly) drew up for Chelsea:

Make sure your images are resized. We went with 320 pixels by 320 pixels for my friend's blog, and I think that works well for most of our templates with full-page width. If your images are all different sizes, this will not look very cohesive or pretty on your page! You'll need to host your images somewhere. Photobucket is nice, free and easy. You'll need to know how to grab your image URL for each image you're using in your gallery. In case you're unsure, this is where the image URL resides on a Photobucket-hosted image:

Once you've got your images ready, let's edit whatever page you're using for this gallery! Paste the code from above into the "HTML" mode of your Page editor. You can click on any image to enlarge it, FYI.

At this point, if you want to create a new row, you will repeat the same steps you just followed. Paste the exact same code from github up above directly underneath the code we just created. You can do this as many times as you want. 

All done! Have fun! Did you create a gallery with this code? I'd love to see it if so!

Chelsea Hibbard

Greenville, SC