Blog Treasury Template (haptree mini treasury template)

Mini Treasury - Folksy Friday - Misi Monday - Etsy Finds?

I started a 'mini treasury' for Folksy finds on my blog in June 2009 and looking back on my statistics it has always been a really successful post format and has more recently become a highly popular post type amongst uk bloggers and the handmade community - so it's a great opportunity to join in with an established network if you are yet to start making your own blog treasuries!

One of Craft Blog UK's members Chantal, behind the succesful blog 'www.hotdogandmerock.blogspot.com' has been using the 'haptree mini treasury template' for both of her blogs and she has found it to be really easy to manage and produces a Folksy Friday for both blogs each week! After the success she has had using the template I felt sure that other bloggers would appreciate discovering my method too.

In the tutorial below I'm going to share my own personal treasury template and explain how to use it. Once you understand the basics you will be able to adapt it to whatever suits your own style and have more or less 'finds' displayed. It can look daunting at first as it's entirely html based but it takes out all the pain of adding images in blogger where extra spaces and line breaks seem to appear from nowhere!

Haptree Mini Treasury Tutorial (RED, GREEN & BLUE!)

Html is the name for the code that tells your web browser (eg. Internet Explorer or Firefox etc) what to show on the screen. Aaaaargh I hear you all saying, but don't panic it's just a case of taking it step by step. Each space is really important, every quotation mark and every angle bracket - the rule for my template is you only alter the coloured text! In order to adjust or paste in html you need to click on the 'Edit HTML' tab at the top right of your new post.

Ok why am I calling it Red, Green & Blue? I thought this would be a simple way of helping you see that each image had 3 important parts:

Red URL = the location of the link (what appears in the address bar on the page)
Green Text = the alternative text / description (when the image doesn't appear in certain browsers or for visually impaired people using internet readers. In Internet explorer this text shows up as a tool tip, that is the text that appears when you hover your mouse over an image (doesn't do this using Firefox browser) - I don't recommend it but you could also leave it blank if you wanted to - it wont affect the image shown in any way.
Blue URL = the location of the image (the actual image url, it will end in jpg. usually, use right click over the image you want to find it's image url address - it's usually under image properties or 'copy image location')

Code for one clickable image:

You need to replace the red, green and blue text with the properties of the image you will be using. You would have to find all of these details anyway even if you were using the traditional method of adding images into blogger, it's not more work it's actually the same or less after having to faff about with positioning! Can you also see that the images have a height and width of 160px - you can change these if it suits but it may take a little experimentation to get it right. I find this size is perfect, after a lot of experimentation.

Here is an example of how the code looks for this item from my folksy shop.

OK now don't panic, your about to see alot of code below! But look it's just the code above written out 6 times and spaced precisely to achieve a 2 x 3 grid of images within a standard sized blogger column. I have also added the tags needed for centering the image so that it sits in the middle of the page.

Code for Grid of 6 Images (2 x 3)

These images below show how the code will look when you copy and paste it into your 'new post' remember that you must copy the code into the 'Edit HTML' tab of the new post. When you have finished adding the urls of your treasury finds you can then go into compose mode to add any title or text below the image grid as you would normally.

Unless you want to copy and paste from here every time I advise saving this template. DO NOT use a word document to save the code, I use a 'notepad' document as it wont add any additional formatting (you can find this by opening up the programmes on your computer and clicking accesories - it's in the same location as paint and calculator programmes, every computer has it) I actually edit the template in notepad too to avoid any pesky formatting that blogger sometimes will sneak in!

Are you thinking, I can't do this it's too complicated? If so please, please put the kettle on and then come back refreshed and take a second look - read through the part entitled 'code for one clickable image' again and think red, green and blue! Once you do one image you'll see it doesn't take that long.

(PS - If you like the pretty background colours used in my haptree and me treasuries take a look at this tutorial for adding a background colour to a blog post it's very straighforward)

I'd love you to link to any treasuries you have created using this template!

Craft & Grow

Search This Blog

Blog Treasury Template (haptree mini treasury template)