Create Dropdown Menu For Labels In Blogger

In your blogger when you see label widget its like a simple but if you can make it sylish follow our post; when you create many labels in your blog then when you see your blog it was in very large list but if you want to make your blogger label list in drop down menu like you see in screen shot . then you can follow few easy steps .

after this you can go to your blogger layout click edit on label widget and set if you want or not number of posts per label .

Because of new style of HTML editor was update in blogger so now i am tell you to how to edit this trick in New HTML editor .

LIVE DEMO

How To Create Dropdown Menu For Labels In Blogger ?

1. Go to blogger > Template 

2. Backup your template .

3. Click on Edit HTML.

4. Click On Jump to widget Button then click on ' Label1 ' .

5. You can find this :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>...</b:widget>

6. After this code see this dotes  ... click on dis to expand your label code .
7. Full code look Like dis :

<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 expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget>

8. Replace this full code with dis 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 style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose 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>
  <a href='http://www.thetricksfree.com'>want this widget</a>
</b:includable>
</b:widget>

9. Save your template .

Done !!
If you have any question . please comment :]