Bitesize Blogger: Creating an Archive Page

22nd July 2013

One of the changes that I’ve made to my blog recently is to compile archive pages. You can see them all just under my header. I’m convinced these have contributed to what has been a dramatic increase in traffic. But more importantly it allows anyone visiting (ie you guys!) to quickly and easily find their way around and generally have a mooch through previous posts. It’s actually pretty straightforward to set up and maintain and, if you can suspend your disbelief at that statement for a few minutes, here’s how…

….and here’s how it looks in HTML mode! Now I know HTML can seem like a faff, but truly it isn’t. Plus it’s the only way to get images to sit neatly side by side and evenly spaced. I mean, have you ever tried lining up 3 images side by side using Bloggers’s drag and drop function?! Now THAT’s a faff! (And usually doesn’t work in my experience). Now this probably looks like alot of code. But that’s just because it represent’s my whole DIY Fashion page as it stands….

The highlighted block below represents one row of 3 pictures. Every time I want to add another 3 pictures to my page, I just repeat this block of code and change the image and page urls contained within it….

Wanna have a go?This is the basic code you’ll need for a row of 3 photos. (See below for 2 and 4 images in a row options) To copy the code, click in the box and press CTRL + A followed by CTRL + C…

For a row with 2 images side by side copy this code instead..

For a row with 4 images side by side copy this code….

Next go to your dashboard and click on PAGES and then NEW PAGE and then BLANK PAGE…

Then click on HTML and paste the code you just copied from the box above by clicking directly into the blank page and pressing CTRL +V….

On your page you should now have something that looks like the code below. (It is simply a colour version of what you just copied and pasted). You’ll see I’ve indicated what you need to insert and where. (ie insert your images, name them, and get them to link to the pages you want them to link to) I’ve highlighted the different elements in colour below because, well it always helps me to see things more clearly that way, and I thought it might help you too! Once you’ve inserted all of those things (Oh, and make sure you keep the speechmarks intact – important!), you’ll have the first row of your archive page. But before you do, read on regarding sizing your images…

The images that you use in your archive page must be sized according to the size of the content section of your blog. ie the central part where blog posts appear. So the first step is to establish the size of that section. To do that, from your Blogger dashboard click TEMPLATE and then CUSTOMISE…

Then click ADJUST WIDTHS….

This will throw up the slider bars that adjust the widths of the various columns. To establish the size of your central content column take the figure from the top box, which is the entire width of the blog. In my case 1400px. And deduct the width of any sidebars. In my case 280px for my left one and 360px for my right one. So my content column is 1400 – 280 – 360 = 760. So my content column is 760px wide. Deduct another 80px (gives me 680px) to account for the “padding” (basically borders) that blogger automatically applies to your content column. So I am left with 680px. Divide this figure by the number of images you want in each row. 680px divided by 3 is 226px. I’ve opted then, for 3 images side by side at 200px wide each. You’ll see from my archive pages that there are spaces inbetween and around my images. I could’ve gone for slightly wider pics, but I like the white space between them. At this stage it’s just a case tweaking the width of your images by a few px here and there to see what you like the best in terms of white space around them…

Once you’ve decided on an image size, resize all your images to the exact same size. I use picmonkey for all my image editing. Love it! (Could be square, could be landscape, could be portrait. As long as they are all the same size and of a width that fits into your content column in multiples of 2, 3, 4 or whatever number you choose). Upload to an image hosting service. I use Picasa….

In Picasa, (other hosting services may name these elements slightly differently) to get the url for an individual image make sure you set the image to “Original Size” and check the “Image only(no link)” box. Then copy the image url from the “Embed Image” box and paste it into your page code where indicated…

Then for each of your 3 images paste in the page url you want them to link to where indicated. Name each image where indicated; (see coloured text above) and you’re done! Check out what it looks like in “compose ” mode and if you’re happy, add another row as follows….

Copy just this block of code…

Put a space after <tbody> as indicated and paste that little block of code in there….

Repeat the adding of image and page urls and image names for this new section of code; and you’ll have your second row. Do it again and you’ll have a third etc etc etc. Then when you’re ready, click “Publish” and admire your skills 😉

Have I fried your brain?? I do hope not! Any questions please feel free to ask, but hopefully you should end up with your own version of this…

Happy archiving! I’d love to hear if this step by step works for you, so if you manage it…drop me a line!

NB: I think, in theory, the HTML code provided should work in other blogging platforms too. But the process for inserting the code into another blogging platform will be different. I only have knowledge of Blogger hence this step by step is only for Blogger blogs only.

Thank you so much for this blogger tutorial! I’ve had such massive problems with inserting pictures, blogger sometimes moves them to a different spot when you’re working on the pictures and it was making me crazy! I’ll use your html codes next time!

Thank you for this, it’s so timely! I noticed some crafty mom blogger types were using like, private link parties to make this happen so I looked into that option and it seems like they must have the paid version of inlinkz or whatever. I like your solution so much better.

It’s possible with wordpress.org, since there are plugins for that; and with wordpress.com if you pay to be able to modify the html; but if you use free wordpress.com it’s not as straightforward as everyone thinks it should be. There are a couple of templates who allow it though. I was investigating this for a while. When I have a bit more time (end of holidays) I’ll dive a bit more into it.

It’s possible with wordpress.org, since there are plugins for that; and with wordpress.com if you pay to be able to modify the html; but if you use free wordpress.com it’s not as straightforward as everyone thinks it should be. There are a couple of templates who allow it though. I was investigating this for a while. When I have a bit more time (end of holidays) I’ll dive a bit more into it.

You must have read my mind, because last night I was wondering just how to do this (and also, bizarrely, if you’d do another of these type of posts because the last one was great)! Thank you. I will definitely give this a try!!!

OK, so I’m only now getting round to doing this. The HTML bit all makes sense, I eventually figured out how to resize my photos (not crop them… duh!), and I’ve now installed Picasa. Unfortunately the version of Picasa I have looks nothing like your screen dumps above. My husband reckons Google have bought them (which makes sense because I keep getting taken to Google+), which is all very well, but I can’t for the life of me work out how to get the image url (nor do the “original size” bit etc etc). Any suggestions? Alternatively, is it possible to upload the photos from my PC – I presume different html would be required for this though? Any ideas? Thanks in advance!

Thank you so much for publishing this. I do have a page for my creations and how to’s but getting them to work is a nightmare! It takes up so much time. I’ll definitely be trying this as soon as I get chance.

This is a great tutorial. I could never figure it out and gave up on coding so I found the page manager at inlinkz.com to make my gallery links.But it does take a little while to load. And its very simple to make photo galleries with for blogger and update..

Great tutorial, thank you! I’m always nervous about working with HTML (so much so that I’ve set up a test blog so I don’t accidentally break my real one) I’ll definitely have to give this a try, I’ve been doing the drag and drop thing and it is a real nightmare!

Oooooo….thank you soooo much!! I always wondered how to do this but I am utterly clueless when it comes to these things. I have a WordPress blog and this worked great! I always upload my photos the same size so I was able to just use the link to the photos directly in my posts without having to worry about the sizing. Here’s a link to my page: http://www.cutcutsew.com/completed-projects/ Thanks again!!

Thank you so much for this informative tutorial…I’ve been wondering how to do this! I love posts that have things step by step like this one because I’m clueless when it comes to coding.Jamie | andersonandgrant.blogspot.com

Wow I’ve been dying to have an archive page on my blog. I am trying thos but I always get a broken HTML tag warning. and i don’t understand it. Im using photobucket as my image hostinghttp://anotsosecretlife2011.blogspot.com/

Thank you, thank you, thank you! I just made my own archive page using this tutorial, and it looks pretty slick, if I do say so myself. I would never have been able to set it up as a grid without this really helpful tutorial.

Thanks! I love how you’ve organized your blog and wanted to do some picture directories, too. I’m on WordPress, but I was wondering if some of it would transfer. Thanks for your generosity in sharing. I’m having fun checking out your blog. (mine’s at patternandbranch.wordpress.com …it’s pretty new, but fun so far)