How To: Create a Project Gallery in Blogger

Erica and I are excited to share a new page on our site: the Project Gallery! We'd love for you to go check it out. It's a quick, easy way to see all of our projects sorted by category.

You can also reach the Project Gallery via our navigation bar.

Now, the rest of this post -- unless you write a blog AND are on Blogger -- will probably not be too interesting (so feel free to skip out, we will be back with our normally scheduled DIY/Crafty/Home Decor goodness on Wednesday).

If you are using Blogger and have ever wondered how to create a Project Gallery -- then please stick around!

Now, I've never written anything about HTML... and I didn't even know any HTML up until 5 months ago when we started writing this blog. So I am not an expert by any means. However, I spent lots of time trying to find a Project Gallery tutorial for Blogger -- with no luck -- so I felt I should share how we created our Project Gallery .

{Note: Taryn from Design, Dining and Diapers has a great tutorial for Wordpress, so go check her tutorial out if you are a Wordpress user.}

To begin, we need to create a static page in Blogger. To do this, first click Pages on your sidebar.

Next, click on New Page and choose Blank Page.

Then you will need to begin editing the Page in HTML, not Compose.

You should start by creating a basic table. I followed this tutorial from Blog Know How, but simplified it a bit for the purpose of a gallery and not a table (for example, I didn't need a header row). For this tutorial, we'll use 2 rows by 3 columns. Add this code to your page:

<table border="2" bordercolor="#7c7c7c" cellpadding="5" style="background-color: white; width: 95%;">

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>
</tr>

</tbody></table>

All of the code in red is related to styling your table and can be adjusted to fit the look of your blog.

table border -- thickness of the line surrounding each cell
bordercolor -- the color of the line surrounding each cell
cellpadding -- affects the amount of 'white space' between each cell
background-color -- the background color for those cells
width -- adjust to make the table larger or smaller (in comparison to your layout widths)

If you click Preview, you should have something that looks similar to this:

Next, let's make it look pretty, like a Gallery.

Choose some images from your posts and crop them to identical size squares using a photo-editor. Once you've cropped them to square, save them in a folder, and they will be easy to place into your table.

NOTE: You can import them into your gallery wall at the existing image size, and then resize them to a square using HTML. However, some photos might look distorted.

In your Page editor, place your cursor in between the >and< in the first instance of this code:

<td></td>

Click on Insert Image.

Choose one of the square images you created earlier.

Now your code should look similar to this:

<td><a href="IMAGE SOURCE URL" ><img border="0" src="IMAGE SOURCE URL" /></a></td>

{NOTE: Image Source URL will be specific to your image (i.e. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJtXacKZPgOStLn2GYggmzQbqgnFJ-vbfggwTh10fG7ICkzEKxNT1hk7YHbKBT9Yc6zvrF4zapt_ZkpsLvVOQLTOp3AkCt_vfAtsPhwCrh5D5AQzVOlCinBeCUtD1Rsu7VFSuQYX53Go/s320/anthro+pillow.jpg)}

Replace the first instance of the IMAGE SOURCE URL (in red), with the Blog Post URL you would like the photo to link too. Now the code should resemble this:

<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a></td>

Repeat this step for each photo you would like to add in the Gallery. I am adding 4 photos, and they will be on two different rows. The second row will only have 1 photo in it.

<table border="2" bordercolor="#7c7c7c" cellpadding="5" style="background-color: white; width: 95%;">

<tbody>

<tr>
<td><a href="BLOG POST URL"><img border="0" src="IMAGE SOURCE URL" /></a></td>
<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a></td>
<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a></td>
</tr>

<tr>
<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a></td>
<td></td>
<td></td>
</tr>

</tbody></table>

At this point you should size your images too. Simply add the height and width code right after the "IMAGE SOURCE URL" like this:

<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" height="175" width="175" /></a></td>

Adjust the values in red according to your preference.

Now, pull up a preview and see how it looks. It should resemble this:

All that is left to do is add some text. For our Gallery, we wanted to title the Category and each Thumbnail.

To title the category, add your text prior to the table code:

TITLE
<table border="2" bordercolor="#7c7c7c" cellpadding="5" style="background-color: white; width: 95%;">

To title each photo, add the text prior to the </td> in each line of code:

<tr>
<td><a href="BLOG POST URL"><img border="0" src="IMAGE SOURCE URL" /></a>PHOTO TITLE #1</td>
<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a>PHOTO TITLE #2</td>
<td><a href="BLOG POST URL" ><img border="0" src="IMAGE SOURCE URL" /></a>PHOTO TITLE #3</td>
</tr>

Now your preview should look something like this:

If you switch over to Compose in the editor, you can edit the titles as you like.

Also, if you want to add additional tables, just copy and paste your table code:

TITLE #1

<table border="2" bordercolor="#7c7c7c" cellpadding="5" style="background-color: white; width: 95%;">

<tbody>

.

.

.

.

</tbody></table>

TITLE #2

<table border="2" bordercolor="#7c7c7c" cellpadding="5" style="background-color: white; width: 95%;">

<tbody>

.

.

.

.
</tbody></table>

We love how our Project Gallery turned out and I hope this tutorial was clear and helpful.

If you create a Gallery, I'd love it if you'd link it in the comments! And, of course, if you have any questions, fire away! I will do my best to answer them.