We’ve been asked to post more Blogger related tutorials – as we said in our recent post about whether you need to go self-hosted, not everyone needs to go self-hosted – Blogger is pretty good if you don’t want to deal with running your own site. We thought we’d start with an easy way to organise your blog.
We’ve posted previously about what labels are in Blogger and even how to add the labels to your menu bar, but perhaps you want to add your categories to your sidebar with little images to illustrate them?
First, use something like Picmonkey to create your images. Obviously this is going to be dependent on what looks best for your layout, but you could do anything from photos to illustrate each topic to a simple label in the colour scheme of your blog
Upload your images to your usual place (obviously this is specific to you, but we have a post over here about where you can upload images to) and find the URL of the image.
To find the category page, all Blogger pages are in the format blogname.blogspot.com/search/label/category (where the underlined parts are specific to your blog)
Head to the layout section in Blogger, and add a gadget to your sidebar. Choose the “HTML/JavaScript” gadget and you’ll see a pop up screen like below
You can leave the title blank, and in the content section, you would put the HTML code in to create an image with a link.
To insert an image, you would use the following code:
<img src="http://[location of your image]" alt="[label title]">
You would replace [location of your image] with the URL of the image you uploaded previously, and instead of [label title], you would put in there what label the button was for. e.g.
<img src="http://www.bonjourblogger.com/menu-food.jpg" alt="Find all posts about food">
To turn this into a link, you would put the following code before the <img part
<a href="http://[link to label page]">
and after the code, you would close things with
</a>
So to put this all together:
<a href="http://blogname.blogspot.com/search/label/category"><img src="http://www.imagehost.com/category.jpg></a>
Click Save, and then head to your site to check out your work. If you use this tutorial, show us your work in the comments!
