How To Make A Dropdown List Label Menu (I)

A drop-down list is a user interface control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value (Wikipedia). In this case we will make a Label List.



This simple tricks is based on changing the Label Gadget settings. So the first step of course, you must already have to use or instal the Label Gadget in your blog.

If you have not install yet, then: Go to your Dashboard >> Layout >> Add a Gadget >> Choose Label and name it, ex: Blogger New Tips Label.

Note: Please choose/click the List Display

The next step is to change the display setting of our Label, by modidying the HTML Label Code.

Go to Layout >> Edit HTML >> and check your Expand Widget Template (Don't forget to backup your template first).

Search and find your Label codes, the easiest way is to find your "Label name", use ctrl+F to find it (Blogger New Tips Label). 

You will find similar code like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>

    <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>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

To make a drop-down list label, just replace the red script with this blue one

<select onchange='location=this.options[this.selectedIndex].value;'>

<option>Choose The Label</option>

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



<option expr:value='data:label.url'><data:label.name/></option>

</b:loop>

</select>

So the final script will be like this:

<b:widget id='Label1' locked='false' title='New Blogger Tips Labels' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div expr:class='&quot;widget-content &quot;   data:display   &quot;-label-widget-content&quot;'>

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

  

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose The Label</option>
<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/></option>
</b:loop>
</select>
 

    <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/> 

And will be displayed like this:

That's all... Enjoy to make a dropdown list label menu...