::: TNMHUNT :::

By Kang Rohman. Tuesday, September 9, 2008

Hello, Readers, do you still remember my post about making a label menu or category in label cloud that I posted here. Now, Kang Rohman would like to give a tutorial about making a label in drop down menu. If you have used a label cloud, it seems that this tutorial is not suitable for you. This tutorial is suitable for those who still use the original label of blogger.

Below is the sample of label in drop down menu

Browse By Categories 3 Column template (9) d'tree menu (1) hack (2) blogspot tutorial (41)

Drop down menu absolutely will use little space in your template and drop down also makes your template look neater. If you are really interested in this kind of label, please follow the following steps but before following it, make sure that you have added a label gadget in your blog.

1. Log in into blogger with your ID.
2. Click layouts
3. Click Edit HTML.
4. Click download full template to back up your template.[ very important ]
5. Click expand widget templates.

6. 

   
<ul>

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

     <li>

       <b:if cond='data:blog.url == data:label.url'>

         <data:label.name/>

       <b:else/>

         <a expr:href='data:label.url'><data:label.name/></a>

       </b:if>

       (<data:label.count/>)

     </li>

   </b:loop>

   </ul>

   
7. Delete the code above and then change it with the following code
   


<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>



<option>Browse By categories</option>

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

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

         (<data:label.count/>)

      </option>

   </b:loop>

</select>


8. Click save template button.
9. Finish and see the result.

Now, your template looks neater, doesn’t it? Have a nice trying