Create Drop down menu for "label" Posted by vuluganck | at Monday, March 30, 2009

Hello every body, today I will tell you a cool tip about your "label" menu , if your blog now has a little labels , so you don't need to do this tip, but if you are owning a blog with very much articles with many labels for each kind of post , I think you are in a right place - Great tips just on Zenplate.

Do you see this pic below ? Don't bother the "Blog Archive" menu , I took it near the "Label" menu just for nice.Look at the Label menu , you will see the different from yours now, isn't it ?

Yes, the difference is all of your labels will be hide , and you have to click the "down arrow" to see all the labels. Save a large space on your blog , make your blog to load faster!

So what are you waiting for? Do it now !

The 1st thing you have to do is : subcribe me , if my blog gets more famous , there will much more great tips that other blogs don't have.
Ok lets go !

Go to Layout--->Edit HTML---->Expand Widget Templates , hey hey have you back up your template by clicking "Download full template" ? If you do wrong , your template will be crashed and maybe can not be fixed!

Then find this code :

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

Try to look clearly and paste this code below instead of all the code above ! I repeat : Change all the code above by this code below :

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

<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


What you have to do is done! Save now and link back to this tip.Thank you very much guys , i hope you like this.
Good luck to you and your blog.
Zen