Blogger Tip : How to Display Labels in a Drop Down Menu

As afar as a blog and blogger is concerned, 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 element “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 label 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 tip

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

Now Click on “Save Template”. Yes you are all done. Congrats to have a Drop Down Label Widget

 SEE HOW IT WORKS WITH MY BLOG "EXPERIENCE GENARATION NEXT"

Watch this Video to Know About Lables

More by this Author


Click to Rate This Article
working