Create Drop-down Label Widget in Blogger

Posted by Lasantha Bandara File Under : change template, html, labels, widget 0 Comment

The Blogger Label widget only displays labels as an "Unordered List" or a "Cloud". Like in WordPress, there is no option to display labels/categories as a drop-down menu. When displaying Blogger Label widget as a Drop down menu indeed will use less space in your blog and it also makes your template look smart. If you are really interested to convert your existing Label widget into a drop-down menu, follow the steps given below.

Note: First make sure that you have already added a label widget into your blog.

1.Go to "Edit HTML" page of your blog.

2.Find the code for your label widget. It will look like this:

Blogger Label Widget Code

3.Now locate to this code:

<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
  <b:if cond='data:blog.url == data:label.url'>
	<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
	<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
	<span dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
  <b:if cond='data:blog.url == data:label.url'>
	<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
	<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
	<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</span>
</b:loop>
</b:if>

4.Replace above code with below code:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By categories</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>

Note: You can use any name instead of "Browse By categories".

5.Save your Template and refresh your site. Final result will look like this:

Blogger Drop Down Label Widget

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.