» » » » » » » » » How to create/convert a Drop Down Menu for Blogger Label list/Categories?

How to create/convert a Drop Down Menu for Blogger Label list/Categories?

, , , , , , ,
Blogger tricks - Convert Labels list widget to dropdown menuAs everyone aware about Blogger label gadget/widget is a default sidebar widget which displays list/tags/category format in the form of alphabetical or in cloud manner.

Earlier we�ve discussed about converting Blogger label into Cloud manner using animated style. By default Blogger won�t provides you by default or in any other way to make label/tags into drop down menu. Here in this tutorial we educate you about converting another way of converting Blogger label/tags into drop down menu.



What are the benefits from Blogger label/tags Drop down menu?
  • You can easily save the space at Sidebar instead of displaying so much of list links/tags
  • You can style you�re Blogger label/tags list into simple manner where user can easily identify and select their choice/relevant category
  • Indirectly you�re giving a chance of reducing loading time of website/blog
  • This is one of the best and SEO optimization technique for blogger blog health


Procedure for converting Blogger list/tags into drop down menu
Sign into your blogger account
Select �Layout� option from Blogger dashboard dropdown
If you�ve already created a Lable/tags widget or else create a new label widget showing different content tags widget and Save the template

Note down the Label ID i.e Label1, Label2 etc.,
Go to Template and Click on �Edit HTML�

Now search for code
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

OR ELSE

Click on Jump to Widget Tab on Top and Select Label ID (Noted earlier) for quick view

Now Expand the widget code and select the code starting from

<b:widget �. ending at </b:widget>

After finding this code replace it with the below code
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;'> <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> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

After successful replacing the code �Save the Template�
That�s it you�ve done and view your experiment to show that you�re a professional blogger.

Code Customization:
Replace Lable1 ID value with your Label ID value (According to your Label ID value, 1, 2, 3 etc)
Replace 'Lablels' with Title of your Drop down menu
If need Replace 'Select a Label' (With your category i.e SEO, Blogger Templates, Blogger Tricks etc.)


Author Words:
Dear Reader if you enjoyed with our article then don�t forget to subscribe to us and also leave your valuable feedback on our Comment box (Blogger/Facebook). Please encourage Us. 
Check more related posts:

Related Posts