Today’s post will be on adding a drop down menu to display post labels as categories and subcategories. The easiest way to explain is to show you the example below – clicking on the menu will display a list of categories and indented subcategories, by clicking on one of the options you’ll be brought to all the posts which are tagged with that label/category. This is a great alternative to the labels gadget in Blogger, it’s neater and allows the reader to quickly find what they’re looking for.
(note this is just an example, no links have been added so selecting an option won’t work)
Always backup your blog before editing html/css
Find out how to backup your entire blog here including your template, blog posts and images.
Add categories and subcategories to drop down select menu
For this tutorial we’ll be using post labels to organise the blog into categories. You can add labels within the post editor under the post settings on the right.
Go to Layout > Add new gadget > HTML/Javascript Gadget and paste the following code
<select onchange='location=this.options[this.selectedIndex].value;'>
<option value="" >Select Category</option>
<option value="LABEL URL" >CATEGORY NAME 1</option>
<option value="LABEL URL" > SUBCATEGORY NAME 1.1</option>
<option value="LABEL URL" > SUBCATEGORY NAME 1.2</option>
<option value="LABEL URL" >CATEGORY NAME 2</option>
<option value="LABEL URL" >CATEGORY NAME 3</option>
</select>Add your LABEL URL and CATEGORY NAME to the code, as highlighted above. Your LABEL URL will look like http://BLOGURL.blogspot.com/search/label/LABELNAME or http://BLOGURL.com/search/label/LABELNAME. You may need to refer back to your blog posts to check the label names. Alternatively, you can click on the label in a post and copy the URL. Once you’ve got the information filled in, save the gadget.
