How to Display Labels in a Drop Down Menu
Posted in drop down menu, how to make a drop down menu for label, how to make drop down menu, labels in drop down menu
No comments
April 21, 2008 By Admin
How to Display Labels in a Drop Down Menu (Useful Blogger Tip)
As afar as a blog and blogger is conecernd, labels are very useful element. We can display labels in the blog in such a way that the readers easily find out the particular topics.
Labels are the key words that easily convey the summery of the main content. So while posting a new article we can put some labels related to the content of the post so that it will display on the main page itself.
For displaying label widget in the blog you have to add the page elemnt “labels” while customizing. I do have placed this lablel widget in my blog. But as I regularly updating my contents, the number of labels started increasing and I feel difficult to handle this. This became a major issue as the lable widget became so lengthy and it badly affects my blog’s arrangements.
In this situation, I realize the potentiality Drop Dow Menu. For displaying labels in a drop down menu it need small place. And there is no need to worry about the Increasing number of labels.
So I am here with a small Blogger Tip that helps you to display your labels in a Drop Down menu. The main attraction is you can change the length and font colour of the Drop Down Menu by using this Hack
Fisrt of all make sure that you have already created labels and added a page element for labels in the blog sidebar.
Before doing editing please download your actual template. Then check the Expand Widget Template”
Now search and find for the following section of code in the template
<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>
<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>
Replace above selected of code with the following code snippet.
<br/>
<select onchange='location=this.options [this.selectedIndex].value;' style='width:200px; background-color:#fff; color:#000;'>
<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>
<br/>
<select onchange='location=this.options [this.selectedIndex].value;' style='width:200px; background-color:#fff; color:#000;'>
<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>
Now Click on “Save Template”. Yes you are all done. Congrats to have a Drop Down Label Widget
Related posts
Share this post
0 comments: