HTML Editing-How to Create a Drop Down Menu for Your Labels ~ SAMPATKUMARI'S Blog "PARISHKAR"

HTML Editing-How to Create a Drop Down Menu for Your Labels

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-
HTML Editing-How to Create a Drop Down Menu for Your Labels
HTML Editing-How to Create a Drop Down Menu for Your Labels

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>
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>
<b:loop values='data:labels' var='label'>
<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>



1 comment:

  1. Good post Sampat Kumari jee :)

    ReplyDelete