Display Blogger Labels In A Drop Down Menu Gadget




| | 31 comments

blogger labels trickIn 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.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

31 comments:

  1. Thank you very much for this awesome post !
    Happy Holidays

    ReplyDelete
  2. Happy Holidays to you also Scrap And Tubes..

    ReplyDelete
  3. I tried the drop down labels gadget, but when I checked out the results on my blog, it was a list, but not drop down. Does this work with all Blogger templates? I am using a template based on picture window. I would appreciate any help you might be able to offer. BTW: since I tried it, I removed the list...it just took up too much space.

    ReplyDelete
  4. @Debra - This will work on all templates.Try again and take your time making sure to follow each step closely.Remember to name you label gadget zzzzz and replace the code as shown.

    Paul.

    ReplyDelete
  5. Hi Paul, thanks for the instructions. It worked for me but was wondering if there is any way to change the font in the drop down list?

    ReplyDelete
  6. This worked wonderfully. Thank you for the tip.

    ReplyDelete
  7. hey Paul! nice post. Is there any way i can fuse multiple drop down menu into one. For example, I have 4 books. What i want to create is a category with those for books as main root, under each Book title a drop down menu in which the chapters will be listed. Is that possible? If it is, do you have a post here on it? If not, would you write one in near future? :D Thank you

    ReplyDelete
  8. I tried it and it worked well on my test blog, but since my blog I have chosen to display up to 10 posts on each page that will take effect or should make some other changes?

    ReplyDelete
  9. Unfortunately, the menu returns all results on one screen. A "teaser" link to "older" posts always yields "No older posts found". Too bad. I'd prefer to see a drop-down that honors the limit (in my case, 1) number of posts per screen I've set for blogger in general.

    ReplyDelete
  10. @ APF - What exactly is the problem ?

    ReplyDelete
  11. @ APF - Update : I have wrote a post quoting your comment with the fix for the number of posts on labels pages - Set Number Of Posts On Labels Pages :D

    ReplyDelete
  12. Wenn ich das Drop-down nicht für Labels, sondern für Credits benutzen möchte, muss ich das auch so dann machen?

    ReplyDelete
  13. Sorry have accidentally used in German. Here in google-english * lol

    If I want to use the drop-down not-for labels, but for credits, I have to do it that way then?

    ReplyDelete
  14. Hi Paul! My layout is a bit different and I had this very useful dropdown menu on my last one, but my new one is not accepting the code. Every time I try to enter it, blogger rejects it. This is the error I get -

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "".
    Error 500

    I seriously know I am doing everything correct, haha. Could there be something else I need to do?

    ReplyDelete
  15. Definitely appreciate this information...thank you

    ReplyDelete
  16. Thank you for the information. Be sure to remind people to switch to the older Blogger interface to do this, at least this is what I found.

    ReplyDelete
  17. This is great and what I was looking for. Is there a way to split the labels into a few drop down categories rather than all in just one?

    ReplyDelete
  18. is there a way to add this menu on a page, like in your blog ? categorys)

    ReplyDelete
  19. Thanks Paul, this was very helpful and worked well for me. I would like to make a drop down menu for Blog archive and popular posts as well. What do I need to change in the html to make that possible?

    ReplyDelete
  20. It works great, but how can I change the beckground color of the menu

    ReplyDelete
  21. I absolutely loved this code and used it to reduce the amount of space my labels list took up. I broke my labels list up into three categories and updated them as necessary. Unfortunately, Blogger appears to have instituted some kind of change that makes it so that when I update the labels in one of the dropdown lists, the dropdown completely disappears. The gadget still exists, but it doesn't display. I'm afraid to update my two remaining labels lists until I get this figured out. Re-adding your code with the appropriate label number and displaying text doesn't appear to fix the problem. Do you have any ideas as to what could be going wrong? I've emailed Blogger, but I don't expect them to help.

    ReplyDelete
  22. hello Paul,

    I have around 50 - 100 labels with sub-labels or posts for each label. I don't want to put all the labels in one drop down menu. Because it reduces the pageload count. I need your suggestion or help on how to put each label individually with multi-postings displaying under the label. By doing this, readers can check individual posting based on categories example: fruits, vegetables, meat, flowers. Under the heading Fruits-dropdown, I want to display apples, bananas etc., when the reader clicks on apple, the page directs to apple posting. Hope I didn't confuse you.

    thanks and namaste

    keertana

    ReplyDelete
  23. I have much more than 500 labels, what I must do?

    Thank you!

    ReplyDelete
  24. It did not work on my, thEy said template cant be formed

    ReplyDelete
  25. This is a great tips, will make my blog reader friendly, thanks so much.
    I will insert it on my blogger blog

    ReplyDelete
  26. A great and easy tutorial! thanks a ton Paul. Could you also please help on how to make more categories by grouping labels? eg if I have a food blog then to have different dropdowns for main course, desserts etc

    ReplyDelete
  27. I use template classic, so the b: code doesn't exist... can you have the tutorial to add labels on template classic??

    ReplyDelete
  28. Great, thanks. I got the labels as a drop down. But is there any way to list the number of posts for each label, as the original gadget does?

    ReplyDelete
  29. Great tutorial Paul. Was craving to find this since ages. You helped my life :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us