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.
11 responses to “Create a dropdown select box using subcategories”
Just used this on my new blog, thankyou so much!! x
Thank you so much for this tutorial! I’ll try it out when I can.
Very helpful! Thanks Ellie. But, I was wondering if it’s possible to style how it looks?
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.Thanks for this! xx
I love this, but I was wondering how to change the size (width) of the box?
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 beforeselectso 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.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.
Hello! Have a look at this tutorial for adding dropdown items, it will need to be tweaked slightly to achive what you are looking for.
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!
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.