How To Add CSS Drop Down Function On Labels In Blogger

Hello Folks,Today in this article we are going to explain a How to Add a Smooth label Categories Widget in blogger template.This widget is very useful for labels of blogger website or blog.If your template do not have a drop down function on category then it's very hard to display all the categories of the website.In this label gadget all the category of your blog comes under it and you can show all the topics,categories and sections of your website.However you can see still so many websites does not have drop down label widget.Few days back one of our precious visitor asked  for drop down widget and today we are here with this awesome label widget.We have used CSS to look widget more beautiful and some html to make work perfect.So to grab this blogspot label widget follow the steps mentioned below.

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for the following below code in your template.

<ul>
  <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>
</ul>

Step 4. Now Replace all of the above code with the following below code.

 <div class="dropdownlabel">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> Search Category </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div>

Customization:

Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD + F (Mac)
Step 6. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

/* Dropdown Label widget by www.bloggersstand.com */
.dropdownlabel select{outline:none;cursor:pointer}
.dropdownlabel{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropdownlabel:before,.dropdownlabel:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropdownlabel:before{border-bottom-style:solid;border-top:none}
.dropdownlabel:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}

Step 7. Now Save your Template...Done !