How To Create Drop-Down Label?

Saving precious real estate

Lol, I'm not talking about rubber trees here. As I see it this Blog's Categories or Labels are getting longer as you can see on the right sidebar. I've published only four posts so far. Think how long it will be should I published post after post after this?

As you know, I've set my home page to show only one post per view. I'm afraid as time goes by and many posts published henceforth, it is possible the categories will become longer the the published post itself. We wouldn't want that to happen, would we?

One way to save some real estate is to make the Categories or Labels shorter. To make the Categories or Labels shorter, we've to tweak a few codes on the templates to create a Drop Down Menu. Unlike 'Archives', Blogger does not support Drop Down Menu for Categories. Categories are sorted by Frequency or Alphabetically in Link List only.

So, without further ado, here's what you've to do to create a Drop Down Menu;

1. Login to your Blogger's account.


2. On your Dashboard, choose (if you've several blogs) which blog you gonna create a Drop Down Menu and then you click on the 'Layout' button.


3. On Page Elements, click on Edit HTML. On this page make it an habit to backup your template before we do any tweaking on the codes. If anything should go wrong after doing any major tweaking or upon hearing a hissing sound coming from your favourite Lappy or Desktop, you will thanks me for reminding you to take such a simple precaution's step, **wink**


4. Check Expand Widget Templates and search for the following string of codes

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


And replaced the tag of codes in red with the following code;


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


After replacing the red codes, save your template and BRAVO, you've got yourself a Drop Down Menu for your Categories! Give yourself a pat. You've done well.

That's it for now. God's willing, we shall meet again for another session to enhance the look of Dilectio, the most beautiful of all Blogger templates.

See ya' when I see ya'.

Technorati Tags: blog categories, blogger label, blogger templates, creating drop down menu, expand blogger widget templates, saving precious real estate