How to Create a Drop Down Category List in Blogger Blog

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

drop down category in blogger

drop down category in blogger

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

drop down category in blogger

Step Three

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

Expand Widget Template box. See image below

drop down category in blogger

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

drop down category in blogger

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.

drop down category in blogger

  • Samantha Wright

    Hey this is a really good practical tutorial, it worked a treat, nice one Fabzy :) Just to advise though don’t place it above an adsense ad unit as the drop down doesn’t work.

  • Fabrizio Van Marciano

    Thanks for letting me know, I’ve tried it and you’re right :)

  • http://www.rancorinfotech.com Aditya

    Hey Fabrizio,What a smart and simple way to explain each and every step with snapshots.An appreciable tutorial.

    • http://www.magnet4marketing.net Fabrizio Van Marciano

      Thanks Aditya, it’s great to do a tutorial like this from time to time, thanks for your feedback bro :)

  • Bhushan

    Hey Fab! Very nicely explained by tutorial. Thanks for sharing this.

    • http://www.magnet4marketing.net Fabrizio Van Marciano

      You’re welcome mate :) Thanks for stopping by.

  • Peter

    Wicked tutorial bro, just what i’ve been looking for, there are tuts on making a category menu but not a drop down like this. and it works cool, thanks so much.

    • http://www.magnet4marketing.net Fabrizio Van Marciano

      Hey Peter welcome to the blog mate, I’ll be sharing some more Blogger tutorials in the future so keep an eye out. Glad you found this one useful, have a great day :)

  • corinne

    Perfect tutorial thanks a lot for sharing this.

  • http://www.label22.blogspot.com Deborah

    Hi,

    Thanks for this really usefull tutorial! It’s really helpfull and it works on my Blogspot, even though I’m a total ‘noob’!
    I do have one question: is it possible to cut the amount of labels in the dropbox? I use a lot of tags, but I only want a few of them in this box.

    Best wishes,
    Deborah