A labels widget displays your post labels. Each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar :)

Regain control of your sidebar, shrink the widget -by converting it into a dropdown (or is it a pulldown?) menu. Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.


Before applying this hack, you must already have a Label widget installed. If you don’t have one, go to Design > Page Elements and add it.
Now let’s make the dropdown:

How To Create Dropdown Menu For Labels Widget

      • Go to Dashboard > Design > Edit HTML.
      • Back up your template.
      • Make sure you DO NOT tick the Expand Widget Templates checkbox.
      • Look for the following lines in your HTML code:

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

        • Replace that line with this code:

        <b:widget id='Label1' locked='false' title='Categories' type='Label'> 
        <b:includable id='main'> 
        <b:if cond='data:title'> 
        <h2><data:title/></h2> 
        </b:if> 
        <div class='widget-content'> 
        <select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
        <option>Click To Choose a Category</option> 
        <b:loop values='data:labels' var='label'> 
        <option expr:value='data:label.url'><data:label.name/> 
        (<data:label.count/>) 
        </option> 
        </b:loop> 
        </select> 
        <b:include name='quickedit'/> 
        </div> 
        </b:includable> 
        </b:widget>


        • If you want change the width of the drop down menu then change this value width:100% to any percentage, or pixel (px).
        • To change the phrase “Click To Choose a Category” then find this line Click To Choose a Category  and replace it with your preferred phrase.
        • If you do not want to show post count at the end of each label then delete this line (<data:label.count/>) .
        Please post your queries and questions below in comments.

        Post a Comment

        1. Thank you! This is exactly what I was looking for!

          ReplyDelete
        2. if i wish to show in this only desirable lables then wat to do??
          looking for jobs??

          ReplyDelete
        3. Hi there :) Many thanks for the awesome widgets on your awesome bllog...i am in middle of designing my blog and your widgets with proper guidance is making my life a lot easier...Thanks again and God Bless...Keep up the good work my friend :)))

          ReplyDelete
        4. hi there:

          I have recently moved to my own domain (hosted on blogger) from blogspot.com and the code "" is not found.. Can you suggest how I could get around this ??

          thanks
          Momchef

          ReplyDelete
        5. Is it possible to make this dropdown transparent or at least to change the background color from white so it better matches my layout?

          ReplyDelete
        6. Thank you! Very very nice :) Shared your post :)

          ReplyDelete
        7. i'm using template classic and my html doesn't have b: code...

          So can you teach me step by step?? thanks a lot..

          Sorry if my english bad...

          ReplyDelete
        8. I tried but it did not work. This message is displayed-'Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
          XML error message: The element type "b:section-contents" must be terminated by the matching end-tag "".
          Error 500'
          What to do?? plz help

          ReplyDelete
        9. Thanks for this..exactly what i've been looking for.,

          ReplyDelete
        10. Sorry Can't work Your code My Blog


          Please post new trick............

          ReplyDelete
        11. My Blog not working drop down label When i click save show this massage [Error parsing XML, line 1326, column 13: The element type "b:section" must be terminated by the matching end-tag "".]

          how to solve?

          http://trustsolutionbd.blogspot.com/

          ReplyDelete
        12. Thank you! I did it and it worked. My issue has been that you are the only blogger to say don't expand the widget. duh. Thanks!

          ReplyDelete
        13. i love this post please can review mine http://loadedjaka.blogspot.com

          ReplyDelete
        14. Hi
          I would liketo know how to add drop down label,I have created labels but i want when I get over label with mouse it points belov sub-label example

          I have label 'MORE'

          and i want to add drop down lablels like

          MORE
          FUN
          HUMOR
          TRAVEL

          please help :D

          ReplyDelete
        15. Hi
          I would liketo know how to add drop down label,I have created labels but i want when I get over label with mouse it points belov sub-label example

          I have label 'MORE'

          and i want to add drop down lablels like

          MORE
          FUN
          HUMOR
          TRAVEL

          please help :D

          ReplyDelete
        16. A portable generator can be a dangerous thing if you don’t know what you’re doing with it. Here are some safety tips before starting the engine of the portable generator reviews and during the engine start-up tips that are useful for you:

          ReplyDelete
        17. Thanks admin, I had spent more time with your website, because this is one of the best resources I have found it and I have learned about how to create drop down menu. Keep sharing valuable information like this.
          Software Testing Training in chennai | Digital Marketing Training in Chennai | SEO Training in Chennai

          ReplyDelete
        18. Android is a mobile operating system developed by Google. It is used by several smartphones and tablets. Examples include the Sony Xperia, the Samsung Galaxy, and the Google Nexus One. The Android operating system (OS) is based on the Linux kernel.
          Android Training in Chennai | Java Training in chennai | Selenium Training in Chennai

          ReplyDelete
        19. Wonderful post!!Java is written once and used anywhere, means general it is platform independent so it can run any platform like in android, linux, etc..,.It Is general purpose programming language. It was Origin by two programming language c and c++(c with classes).Thank you for sharing your article.
          Regards,
          java training in vadapalani | JAVA Training in Chennai

          ReplyDelete

        If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

         
        Top