How To Make A Dropdown List Label Menu (II)

In How To Make A Dropdown List Label Menu (I) we discuss about How To Make A Dropdown List Label Menu  by modification The Label Gadget setting.

Although it was quite simple, this method could only make a dropdown list of Label and must have All list, we can not choose display exactly what we need.

In this article, we will discuss How To Make A Dropdown List Menu (II) that we can totally control what we want to display in the dropdown menu not just the label, although we must work a little hard than the first method.

How we can do it...? Yup.. by write the link one by one. Don't worry..., actualy this method is still simple but very usable, because with this method we could make a dropdown menu, whatever we want, not just a label list.



First.. we pick up the name or title of your dropdown menu, then you must note the URL address all of your link list.

The next step, we use our "Add a Gadget" facilities and add "HTML/JavaScript" to put the Code to make a dropdown menu.

Go to your Dashboard >> Layout >> Page Elements >> and click "Add a Gadget" >> than click HTML/JavaScript.

Copy this simple Script below, and Paste into the content column..

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>



<option value=0 selected> Your Menu Title  </option>

<option value=" Your Link Address "> Your Link Title </option>



</select>

</form> 

Please replace the Red, Blue and Purple with your menu title, link address that you've prepared before, and title to represented your link. After finished your work, don't forget to save it.



Here is an example:

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>



<option value=0 selected>-New Blogger Tips-</option>

<option value="http://doit2us.blogspot.com/2010/03/how-to-make-dropdown-list-label-menu.html">how to make a dropdown list</option>

<option value="http://doit2us.blogspot.com/2010/02/how-to-make-spoiler-in-second.html">how to make a spoiler</option>

<option value="http://doit2us.blogspot.com/2010/02/how-to-make-sticky-post-in-your-blogger.html">how to make a sticky post</option>

<option value="http://doit2us.blogspot.com/2010/02/how-to-make-drop-capital-letter-drop.html">how to make a dropcap</option>

<option value="http://doit2us.blogspot.com/2010/01/how-to-make-navigation-menu-bar-on.html">how to make a navigation menu</option>

<option value="http://doit2us.blogspot.com/2009/12/how-to-change-blogger-favicon-ico.html">how to change blogger favico</option>

<option value="http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html">how to add the add a gadget facilities</option>

</select>

</form>

And the Dropdown menu will look like this:

-New Blogger Tips-how to make a dropdown list how to make a spoilerhow to make a sticky posthow to make a dropcaphow to make a navigation menuhow to change blogger favico  how to add the add a gadget facilities

You can change Your Menu Title with instruction sentence like "click here to show", and put your menu title into HTML/JavaScript Title column.



We could also make a dropdown menu not only in a sidebar. but in the blog post too, exactly like in this article.. Simply.. Just write your code inside your blog post and tara... you,ve got your dropdown menu in your post.

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