HTML Editing-How to Create a Drop Down Menu for Your Labels
While creating new blog posts we categorize all our posts subject wise and place them under different labels. Labels are very helpful to the reader to find posts under specific categories, but in the long run the number of labels goes so high that it may prove to be a big problem. Though a large number of labels may be problematic specially for those using two column templates, but having labels is unavoidable. However we can create a drop down menu to sort this problem out but for this we need to make small changes to our blog’s HTML Document-
Here is an easy procedure to create a drop down menu for your labels
First login to your blogger Dash Board.
Click “Template’
Click ‘Edit HTML’
Now the HTML document will open.
Now you have to find the following set of html code-
<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>
<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>
Now click anywhere in side the open HTML document and press “CTRL+F”, the HTML search box will open.
Write “<b:loop values='data:labels' var='label'>” in the HTML search box and press ‘Enter’
Now the first line of the above code will be highlighted.
You have to replace the entire code above from “<b:loop” to “</b:loop>” with the following code.
“<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>(? ? ? ? ? ? Here write the title of your choice to appear) </option>
<option>(? ? ? ? ? ? Here write the title of your choice to appear) </option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>”
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>”
In line number 2 above after <option> and before </option> Write the title to appear.
For example you want the title”Find Menu” then your line number 2 above will be as given below –
“<option>Find Menu</option>”
menu
bar in blogger, how to edit menu in blogger, how to create menu bar in blogger,
how to create drop down menu in html and css, how to add menu to blogger,
blogger drop down, dropdown menu bar blogger, sub menu, HTML Editing-How to
Create a Drop Down Menu for Your Labels, Drop Down Menu For Blog Labels, Set
All your Blog Labels Under One Drop Down Menu