How to Create a Projects Directory on Blogger

I’m a blogger. Diana is a blogger. And a small group of you are probably bloggers too, right? Today I’m here to share a little Blogger How-To that I figured out with a little trial & error that I know some of my blogger friends out there are itching to hear.

How to Create a Projects Gallery for Blogger | Home Coming

I’ve been blogging on Home Coming for a little over a year now and have DIY’ed a ton of projects and made a lot of progress on our house – but my “standard” navigation through blogger wasn’t making it very easy for my readers to see all of those great projects in a quick and easy way. Digging through archived posts is just not something I wanted to put everyone through!

So after some time and little effort (no coding!!), I put together a Projects Directory on my blog, as well as a Remodeling Directory and a House Tour using the following instructions.

How to Create a Projects Directory on Blogger

Step 1: Edit your photo and create a thumbnail for your project. I created a template in Photoshop in which I’m able to quickly place a new image + headline. I built my thumbnails at 132×180 pixels which allows for four wide in my blogger template.

Create a Projects Directory on Blogger | Home Coming

Step 2: I use Flickr to host all of my photos, so I uploaded all of my completed thumbnails so I could use the HTML’s in the next couple steps.

Create a Projects Directory on Blogger | Home Coming

Step 3: Grab the HTML of your thumbnail from which ever photo platform you use at the “original” size.

Create a Projects Directory on Blogger | Home Coming

Step 4: Head on over to Blogger. Projects is one of my “Pages” on blogger which I have set up as part of my top navigation. On your Pages page, click on Edit.

How to Create a Projects Directory | Home ComingCreate a Projects Directory on Blogger | Home Coming

Step 5: As a way to make the HTML easier to understand, I tend to write “INSERT # HERE”. This is where you’ll past the HTML code from your thumbnail in Flickr (or whatever program you use). You can easily turn the text white so no one can see it but you in the HTML if you want to use this trick.

How to Create a Projects Directory

Step 6: Once you have your thumbnail inserted, click on it, and the below box will show up. You can see from the below that it says “Go to Link: www.flicker.com/blahblahblah”. Click on “Change”.

How to Create a Projects Directory

Step 7: After hitting the change thumbnail, insert your blog post’s URL in the Web Address Box. Then click on the first box in the thumbnail left.

How to Create a Projects Directory Step 3

And there you have it. Your very own projects directory! Arrange your photos however you’d like them, at whatever sizes you’d like depending on how large you’d like your thumbnail. BeaUtiful.

Leave a comment if you have any questions. I’m happy to help!

Want to learn more about me or see my DIY Projects? Swing on by Home Coming and check us out!

Comments

  1. says

    Great tutorial! I would like to add this to my blog too. Quick question though…do you have to do this process on every post to get the directory to appear or is there a way to add it to the layout so that it appears on every post without having to recreate it every time?

    • says

      Unfortunately I haven’t figured out a way for this to automatically add to layout. I’m sure there’s a way, but I”m just not a coding expert. What I do is each Friday I put together all of my thumbnails for the week and knock it out in under 30 minutes. If you create the template in photoshop for your thumbnails, it’s super fast. Hope that helps!

  2. says

    I started this tonight, and it’s going to take some time to build a gallery of all of my projects, but this tutorial is GENIUS! So easy to follow, and it looks great! Thank you so much for sharing!!

  3. says

    This is amazing! I built a project gallery on my blogger blog, but it’s pretty hard to add in new projects, so I think I might start from scratch with this method. Thank you!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Image Map