Create a dropdown select box using subcategories

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" >&nbsp;&nbsp;&nbsp;SUBCATEGORY NAME 1.1</option>
	<option value="LABEL URL" >&nbsp;&nbsp;&nbsp;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.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

11 comments

    • Ellie M on

      Hello Erika. Yes, you can by adding select { } to your CSS. To remove the default grey gradient box add -webkit-appearance: none; in between the brackets, then you can style it however you like.

      Reply
    • Elaine M on

      Hello, to change the width of the select box add select { width: 200px; } to your CSS, change the number for the size. A good idea would be to add the id of the widget before select so it will only change the width of that box. This ID will be something like #HTML1, although the number might be different. You can find it in your template.

      Reply
  1. i can has chikkenburger on

    Hello, I need some help for adding subcategorys on my blogger blog. I want that the subcategory will open when the mouse coursor is on the category and then the subcategory opens to the right sight. sorry for my english. I hope you understand what I mean and hear from you.

    Reply
  2. Mariana on

    Hi there!

    I love your tutorials, they are so easy to understand!
    I was wondering if you could help me, I used this tutorial to create a dropdown menu in my blog but it added some weird dashes and I don’t know how to remove them.
    I’m not using a Blogger custom template, so it’s really hard for me to find and edit the CSS.
    Also, if you could give me a tip on how to make my slider full width, from left to right, I would really appreciate it!
    This is my blog: http://marianacheta.blogspot.com/

    Thank you!

    Reply
    • Elaine M on

      Hey Mariana, thank you! You have CSS in your template telling it to add a | after navigation links, to remove this find #navigation .widget ul li::after { ..... } and delete it. To make your post slider full width you’ll need to remove the entire slider section (wrapped in a div called carousel) in your template out of the container div. Then alter the CSS related to your post slider to change the image width.

      Reply