Friday, March 1, 2013

Tutorial: How to add clickable image tabs to your sidebar in blogger

I recently constructed a photography blog for a friend of a friend who runs a fabulous photography business on the South Coast of NSW.

TMK Photography take a range of photographs including pregnancy, wedding, baby and family pictures. It was important for the blog to have easy to navigate options for potential clients to find the product/style of shoot they were after.

As a blogger, one thing you might be familiar with are the 'labels' that you apply to your blog post. These categorize your posts and group like posts together. I talked a little about how you could organise these into tabs when I wrote about making your pages/tabs work for you and your readers.

On the TMK Photography blog I created some simple images which would become clickable buttons that lead to some important labels for this blog.

You can click on the image to the right and enlarge to see a little better or visit the blog and use them yourself!

The buttons are down the left side bar and show baby, kids, wedding, pregnancy and so on. By clicking on these images you are taken to the posts that are labelled with those particular themes.

Are you intrigued? Do you want your own clickable image buttons. It's really easy! I'm going to show you how to do it in blogger as that's what I use. I'd hope you could do something similar in other blog hosts by adding widgets in the same way.

1. Choose your most frequent labels and use them (a lot)
The first thing you need to do is decide on what your important labels are. I use the tabs at the top to direct my readers and the labels that are most important to me are recipes, baby, toddler and sewing. Once you know which labels you use most frequently (you could check your label cloud if you have one in your sidebar.) Here's mine...I think it needs a tidy up but you can see the ones I use most are the large ones at the top! :)

2. Design an image for your popular labels
Using photoshop, ribbet, picmonkey or just a plain image of your choice have your images ready for each of the labels you wish to direct readers to. It's a good idea to check the width of your sidebar in your template and make your image fit nicely! :)

3. Find the direct link for the label of your choice
This is easy to do. Either at the bottom of a published post or from your label cloud click on the label of your choice. This will take you to all the posts under that label in chronological order.
Look in your web address bar and you will have the direct link to the label.

For instance for the baby section on TMK photography the direct link is and the screen I go to shows the posts that have been classified under the label 'baby'.

Now we want to pair the image that you've created with the direct link to create your button! You ready!? Here we go!

4. Add an image widget to your sidebar
Go to your dashboard and select 'layout'. Now choose to 'add gadget' to your sidebar. Now select to add an 'image'. In blogger you'll get a screen like the one below.
I usually leave the title and caption blank so that nothing except the picture displays on the sidebar. You might like to include these if they suit your blog or if you didn't add a title to your image when you created it.
Upload your photo from your computer or from the web. Where it says link you need to paste the direct link to your label which you found in step 3! A little preview of your picture will come up like in the example below. (Blogger also nicely shrinks it to fit your sidebar for you!)

5. Save and drag to where you'd like it
Now you can press save and perhaps preview your blog. Then you can move the image widget to where you'd like it on your sidebar. You're done! Now add two or three or more! :)

You might like to create one to direct people around your blog to a popular blog post, to a particular label or even to your pinterest or facebook page!


How'd you go? I'd love to see your blog when you're done! Please leave a link in the comments below.
If you've got any questions please ask and I'll get back to you as soon as I can!