Display Blogger Labels In A Drop Down Menu Gadget

In this post we have an excellent tutorial showing you how to display your blogger labels, tags, category's or what ever you like to call them in a drop down menu.There are a number of reasons this Blogger trick is useful.First of all by displaying your labels as a drop down menu you can have them placed in prime position at the top of your blog without taking up too much room.Some blogs i have seen have up to 50 different labels and even more, these labels in a list or cloud would take up a huge amount of space in the sidebar.Secondly we will add the hack to only one labels gadget, so you can have a drop down list of your blogs labels and still have the option to add a list or cloud version elsewhere on your blog.To make this as easy as possible for everyone we will add a new labels gadget and then add the code needed to make it a drop down menu.

Live Demo - Scroll to the end of this blog to see the drop down labels gadget in the footer section.

OK lets add a Drop down labels gadget to your blog , you might want to back up your template before you start.

Drop Down Labels Menu Gadget For Blogger

Step 1. In Your Blogger Dashboard Click > 'Design' > 'Add A Gadget'





Step 2. From the pop up menu scroll to find 'Labels' and click the 'Add' icon.
Important - The gadget will have the title 'Labels' change this to zzzzz and save the gadget.



Step 3. Now advance to your 'Edit Html' page - Do not tick the 'Expand Widget Templates' box.



Step 4. Find the following in your blogs Html : zzzzz
(Click Ctrl and F for a search bar to help find the code - More Info)

Step 5. When you locate zzzzz it will be in a section of code like this :

<b:widget id='Label1' locked='false' title='zzzzz' type='Label'/>

Step 6. Replace that full line of code with the following 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>

Note - The text in red is what will be seen on drop down menu and can be changed to Tags, Category's etc..

Step 7. Save Your Template - The labels gadget is now in drop down form.You will want to change the name of the gadget from zzzzz, to do this just return to your Design page > Edit Gadget and change to Labels or Category's etc..

That it you have a very useful drop down list of your blogger labels for readers to easily navigate.Remember only this labels gadget will be in drop down format and if you remove it you will have to start from step 1 again.We have lots more Similar Blogger Tips and Hacks for you to check out and don't forget to leave your comments below.