Drop-down labels - First blogger beta template hack!

Update: I developed a better version of this hack later with 3 styles of labels. Please check this out.

[Translations by other bloggers: Chinese]

I couldn't contain my curiosity after seeing John's post and Blogger Buzz post that template editing has been opened up for Layouts also in Blogger Beta. So, I decided to jump in right away and try the tiny little idea that I had in mind already. I believe this is the first Blogger Beta template hack and I could't resist saying that ;).

As you know, labels are Blogger's way of supporting categories. But, Blogger supports it only as a list of links unlike Archives for which it supports other options such as Drop-down menu, Hierarchy (Expand/collapse). I thought there's a possibility of a hack right there - Drop-down menu for labels. It was a breeze to implement it after spending a little bit of time with the template.

Even though Blogger has opened up template editing, they are just teaching us the ABCD of it now. So, if you click on Edit HTML, it shows only the condensed form of the template. But, there's an option at the top right called "Expand Widget Templates". If you click it, you will see the template expanded to more hacker-friendly form. Blogger's help page for Widgets just says "coming soon" but what good is a hacker if he cannot understand raw code without help pages :).

Assuming that you have already created labels and added a page element for labels in your sidebar, here's what you need to do to convert the list of labels to drop-down menu like the one I have in my sidebar. First download the expanded template to your hard disk, make a copy of it and find the following section of code in the template.

<b:widget id='Label1' 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'>

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


   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

Replace the portion above in red with the following code snippet.

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select a label</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

Then upload the modified template to Blogger and Voila, you got drop-down labels!

(I also checked whether Expand/collapse option will work with labels but Blogger doesn't seem to provide the list of posts for every label, instead only depends on the search facility. I will explore the possibility of this when I get more time.)