How to Make Blogger Categories Into Drop Down Menu

In the last week several visitors asked questions that how to make blogger categories into a drop-down menu? They says that we are unable to do that as blogspot platform does not allow this features to its users by default. Remember that blogger label widget only displays labels in the form of unordered list or as a Cloud.

After the insist of our valuable visitors, we are writing this post about how to make blogger categories into drop down menu format. If you are running a blog, and posting blog articles about different categories, you may also be showing a Label Widget in your sidebar. Displaying categories or Labels in the default form take a lot of space of your blog. But don’t worry about that, we have a very good solution for that. The drop-down labels or categories menu will easily hold more than hundreds of labels without taking too much space. In this blog post we will show you how to create Labels or categories drop down menu in a Blogger blog and save space.

Why to Use Labels/Categories Drop Down Menu

Probably you may have used the default Label widget that is provided by Blogger. This Label’s widget is useful if your categories or Labels are restricted to a few. However, if you are using too many Labels or categories then it will take a lot of space on your blog. Due to taking too much space, your blog will look unprofessional and your visitors will not like large number of labels on your blog.

Drop Down categories

The main purpose of making blogger categories into drop down menu is to save your blog space that it occupy in the default form and make your blog look more professional and beautiful for your readers. It is, therefore, we add and make blogger categories into drop down menu.

By default, when you want to add labels or categories to your blog, the widget will displays a list of your categories in a list format. The list will be either in alphabetically shown or as a cloud format. And this widget has no feature, by default, to display your labels or categories in drop-down menu format. This feature can only be added when you edit your HTML of your blog.

WordPress which is leading blogging platform really offer this feature to its users. But in blogger, there is no such option to display labels/categories in the form of drop-down menu. If you look at the default widget of feature of categories, also called labels in blogger, you will see that these labels or categories occupy too much space, if your blog has too much labels. On the other hand, if you want to display blogspot widget as a drop down menu, so really it will need less space in your blog as compared to full list. Displaying your categories in the drop down form will also make your blog and template smarter as compared to your competitors.

Let’s Make Blogger Categories into Drop Down Menu

Now if you want to really convert your existing label or categories widget into a drop down form, you have to follow our unique step-by-step guide.

  • The very first thing that you are required to do is to go to your blogger blog and sign in to your account.
  • From the left side drop-down list of feature, just click on “Layout” option.

Layout

  • If the “Labels” gadget is not already added in your layout then you have to click on the “Add a Gadget” link in your desired location where you want the categories menu to be displayed and then click on the “+” icon beside “Labels”.

Add a Gadget Link

  • Next select on “Template” option from the left sidebar.
  • Now click on “Edit HTML” option of your blog.
  • Find the code for your label widget, please note that it will look like this screen shot.
  • Next, you have to locate and find this code.

Edit HTML Codes in Blogger

<b:if cond=’data:display == &quot;list&quot;’>

<ul>

<b:loop values=’data:labels’ var=’label’>

<li>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<b:if cond=’data:showFreqNumbers’>

<span dir=’ltr’>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values=’data:labels’ var=’label’>

<span expr:class=’&quot;label-size label-size-&quot; + data:label.cssSize’>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<b:if cond=’data:showFreqNumbers’>

<span class=’label-count’ dir=’ltr’>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if>

  • Now replace the above code with the following code.

<select onchange=’location=this.options[this.selectedIndex].value;’ style=’width:100%’>
<option>Browse By categories</option>
<b:loop values=’data:labels’ var=’label’>
<option expr:value=’data:label.url’><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>

Important Notice: If you look at the HTML code, you will find that we have used “Brows By Categories” words. But you can edit this name according to whatever you want. For example, you can use “Search Categories” instead of “Browse By categories”.

  • In the last step, once everything is done, press “Save Template” option and then refresh your site to take effects. And finally you will see the results look like this.

Final Thoughts

We are hopeful that this tutorial has helped you a lot in learning how to create labels or categories in the drop-down menu format in Blogger blog. If you like this post, don’t forget to share it on social media networks with your friends and colleagues to spread the words. Also share your thoughts with us in the comments section below.

Also read about How To Add Categories To Blogger/Blogspot Blog

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top