OK, so it’s been a wee while since I shared with you any kind of hacking tutorial, so today I’d like to share with you a simple tip that will enable you to create categories in your Blogger aka BlogSpot blog.

Essentially there are no categories in Blogger; they’re called labels as you well know. If you want to see a live working drop down category, label list in blogger, check out my small time art blog at http://vanmarcianoart.blogspot.co.uk/.

OK, let’s begin creating a drop down category list or labels in Blogger.

Step One

The first step is to log into your blogger dashboard and select the blog you want to add a drop down category list to. Then click on Layout > Add a Gadget. Then in the pop-up menu you’ll need to find Labels and click on Add. See illustrations below

Step Two

In the box you will notice the title will say Labels, we need to make it simple to find the widget line of code in the HTML in the next step, so for now rename it to 88888. See image below

Step Three

Now head over to Template and click on Edit HTML. Avoid clicking on the

Expand Widget Template box. See image below

We now need to search for the code 88888 we entered earlier in the new labels gadget we created. To do this simple hold down on CTRL and hit F to open up the search box in your browser. If nothing happens, ensure you’ve clicked once into the HTML body of content and then hit CTRL and F again. You should by now have located the line of code that contains 88888. Keep a record of the label number, i.e. the label number in this tutorial you’ll notice is label5 as highlighted in the red box. See image below

Step Four

Now replace that whole line of code where the 88888 code is sectioned with the following code below. Don’t hit save changes until you’ve read the next part below the code.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Remember I asked you to make a note of the label number, replace the label99 with the label number you noted down earlier.

Hit save changes and you’re done. Check your blog to ensure that the changes have taken effect. You can rename the labels widget to anything you want by going back to Layout and edit gadget. If you’ve followed the instructions carefully you’ll see a working drop down category list in your blogger blog, as illustrated below.

If you have any questions, please don’t hesitate to ask below. I cannot guarantee that this will work on all blogger templates, but it certainly works on most of the ones I’ve played with.