Bitesize Blogger: Creating an Archive Page

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…

Here’s how my DIY Fashion page looks in the “compose” mode of the “pages” function accessed via my Blogger dashboard…

….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…

Enter any header text/pagedescription/intro here:<br />
<br />
<table border=”0″>
<tbody>
<tr>
<td><div align=”center”>
<a href=”Enter the page url you want the image to link to here” title=”image name here“> <img alt=”image name here” src=”hosted image url here” /></a></div>
</td>
<td><div align=”center”>
<a href=”Enter the page url you want the image to link to here” title=”image name here“> <img alt=”image name here” src=”hosted image url here” /></a></div>
</td>
<td><div align=”center”>
<a href=”Enter the page url you want the image to link to here” title=”image name here“> <img alt=”image name here” src=”hosted image url here” /></a></div>
</td>
<tr>
</tbody>

</table>

Sizing Images for your Archive Page:

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.

Tweet about this on TwitterShare on FacebookPin on PinterestGoogle+

35 Comments

  1. Elise Lin July 23, 2013

    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!

    Reply
    • Miss P July 23, 2013

      Bloggers a nightmare for pictures isn’t it!? I remember swearing so much when I first started blogging!
      Px

      Reply
  2. Elisha July 23, 2013

    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.

    Reply
    • Miss P July 23, 2013

      Your welcome Elisha. Not familiar with the whole linky party thing. Have seen them around but didn’t know you could utilise them for archive pages. Interesting!
      Px

      Reply
  3. Cherise July 23, 2013

    Thank you so much for this awesome tutorial! I’ve been wanting to add pages to my blog, but didn’t know how. Now I can improve my blog and make it more user friendly πŸ™‚

    Reply
    • Miss P July 23, 2013

      You’re very welcom Cherise. Any probs drop me a line. I’d love to know how you get on πŸ™‚
      Px

      Reply
  4. That’s really neat and helpful Portia – thank you. I use WordPress but my head says it should convert really easily with no real difficulty. I may have to give it a whirl πŸ˜€

    Reply
    • Miss P July 23, 2013

      Hi Louise, yeah in my head I figure it should work on WordPress too. Will you let me know how you get on? I’d be very interested to know!
      Px

      Reply
    • elenaknits July 27, 2013

      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.

      Reply
    • Elena Knits July 27, 2013

      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.

      Reply
  5. Claire Cooper July 23, 2013

    Thanks so much for this. I’s been something I’ve been meaning to have a go at for a while.

    Reply
    • Miss P July 23, 2013

      Yay! You’re welcome. Give it a go and let me know πŸ™‚
      Px

      Reply
  6. Masustak eguzkitan July 23, 2013

    WoW, thank you for all the explanation! I have to save this post, to use it when I want to change my blog πŸ™‚

    Reply
  7. Helen July 23, 2013

    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!!!

    Reply
    • Miss P July 23, 2013

      Hiya Helen, erm….yeah that is slightly spooky isn’t it?!! Glad you like the first two posts in this little category. More to come πŸ™‚
      Let me know how you get on?
      Px

      Reply
    • Helen August 1, 2013

      Hi Portia, yes very spooky!!!

      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!

      Reply
    • Miss P August 1, 2013

      Hey Helen. I sent you an email πŸ™‚
      Px

      Reply
    • Helen August 1, 2013

      Sorry – ignore the last comment. I figured it out. Thank you!!! This was a great tutorial and I really am looking forward to what you show us next!!!!

      If you fancy taking a look at my newly created page…http://grosgraingreen.blogspot.co.uk/p/made-by-me.html

      Reply
  8. Claire July 23, 2013

    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.

    Reply
  9. EmSewCrazy July 23, 2013

    Ah! Thanks for this! Love your new archive pages too!

    Reply
  10. 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..

    Reply
    • Miss P August 1, 2013

      Have heard mention of inlinkz before. Sounds interesting. But having said that, I find this method so straightforward now, I’m kinda happy to stick with it. Glad you liked the tute though!
      Px

      Reply
  11. Roslyn July 24, 2013

    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!

    Reply
    • Miss P August 1, 2013

      A test blog is a great idea!
      Px

      Reply
  12. Sew Sleepy July 26, 2013

    Very new to blogging this is so lovely thank you for sharing, I will definitely trying this one. Loving the blogging tips

    Reply
  13. KellyLeaSews July 27, 2013

    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!!

    Reply
    • Miss P July 27, 2013

      Looks great! Thanks so much for letting me know. BTW, I have similar issues with Colette patterns!
      Px

      Reply
  14. Jamie Hoover July 29, 2013

    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

    Reply
  15. Kelsey August 15, 2013

    Thanks so much for posting this! I just did an overhaul of my blog and this helped out a lot! It took some time, but it was worth it πŸ™‚

    Reply
  16. Nana Granada August 30, 2013

    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 hosting
    http://anotsosecretlife2011.blogspot.com/

    Reply
    • Miss P August 30, 2013

      Hi Nana Granada πŸ™‚ I tried emailing you but it bounced back. If you want to send me your code to kitschycoo@hotmail.co.uk I can take a look for you. See if I can figure it out πŸ™‚
      Px

      Reply
  17. Emily September 14, 2013

    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.

    Reply
    • Miss P September 14, 2013

      Ah, you’re welcome Emily! I hopped over and had a look. It looks awesome!
      Px

      Reply
  18. lp December 14, 2013

    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)

    Reply

Leave a Reply

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