How To: Create An Image Gallery Project Page in Blogger

If you check out our DIY blog page frequently, you might have noticed we gave the entire thing a little makeover of its own!

When we began writing the blog we created the DIY page as a way to keep track of all the projects we'd tackled in one easy place to find and reference. Over time as we kept adding new projects, it quickly turned into an unwieldy link list that was getting impossible to navigate, like so:

Kinda boring, right?

We thought so too, so we organized everything with image thumbnails under categories like Home & Crafts, Garden, Holidays, Food & Recipes, Pets and more:

Each image and description underneath is linked to the corresponding project/recipe post and conveniently opens in a new window when clicked.

So now when you want to find things like how to clean and wall mount a deer skull or how to make sweet potato chips, it should be a lot easier to scan and visually pinpoint from the list of image thumbnails vs. the older never-ending link list. Much Better!

As with most things, this DIY page page will grow and evolve with us. Down the road we'd like to take it up a notch even more — with a little more uniformity and consistency. For now, we're just thrilled we powered through converting each of the linked tutorials into this image gallery. It will be much easier to just slip new projects in one at a time as we tackle them from here on out.

For those of you on the little-to-no coding experience list like us that also want an image gallery for your blog or website, here's the tutorial we used and tweaked to fit our page from Laura's Crafty Life. Neither of us are stellar with coding, so everything you see here on the blog, we've figured out on our own through Googling or just playing around with different settings here and there.

If you are using Blogger as a platform (like we do), this is a great tutorial to walk you through the process of creating blog tabs and getting the image gallery. If you already have blog pages or are using a different blogging platform, you might just want to skip ahead to the code section that you can grab and use in the html section of your own site .

To make the code work for our blog, we liked the look of 3 images in a row instead of 4, so we just stripped out one of the 4 lines of code in the html string the tutorial provides — you can really tweak it however it works best for you. For example, you could add another string of the same code to get 4 images to display in a row, etc.

What DIY projects have you been tackling lately, online or otherwise?

- + | More DIY Projects | + -