How To Apply Labels Drib Downward Bill Of Fare Inwards Blogger

In the past, nosotros cause got shown you lot how to display labels inward Blogger, How to agency Labels inward Blogger in addition to How to Rename Labels inward Blogger. Recently, i of our users asked us almost How to exercise Labels Drop Down Menu inward Blogger. If your weblog has a lot of labels, hence showing a Label widget inward your sidebar would cause got a lot of space. Therefore, a Label or category driblet Down card volition easily jibe to a greater extent than than hundreds of labels without taking a large space. In this article, nosotros volition demo you lot how to exercise labels driblet downwardly card inward Blogger.

Why to Use Labels Drop Down Menu:

You mightiness cause got used the default Label widget provided past times Blogger but if you lot cause got a lot of labels, hence it would cause got a lot of infinite on your blog. Therefore, it volition brand your weblog await unprofessional in addition to untidy at the same time.

The master copy role of using labels driblet downwardly card is to relieve your weblog infinite in addition to brand your weblog await to a greater extent than professional person in addition to presentable. Therefore, if you lot desire to add together Label driblet downwardly card inward Blogger follow the tutorial below.

Create Labels Drop Down Menu inward Blogger:

1. The really showtime matter you lot demand to exercise is to Add a Labels Widget to your weblog (If you lot cause got non added already). We'll convert the default Label widget into a Drop Down Menu. Hint: (Go to Blogger >> Template >> Layout >> Add a Gadget >> Labels).
   
2. After adding the Labels widget, you lot demand to add together CSS codes to your Blogger template. Therefore, Go to Blogger >> Template >> Edit HTML and search for pare tag. After finding the pare tag, simply higher upwardly it glue the next code:
   

/* Dropdown Label */
.dropmedown pick out {
    outline: none;
    cursor: pointer
}
.dropmedown {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border: 1px venture transparent;
    border-radius: 3px;
    height: 36px;
    line-height: 36px;
    color: #444
}
.dropmedown:before,
.dropmedown: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
}
.dropmedown:before {
    border-bottom-style: solid;
    border-top: none
}
.dropmedown: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
}



3. The adjacent matter we'll last doing is to add together HTML codes to your template hence labels tin business office every bit driblet downwardly menu. In your template, search for this:
   

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



4. Now supersede the higher upwardly code amongst the next code:
   

<div class="dropmedown">
<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>


5. Once everything is done, press "Save Template" to complete.

We promise this tutorial has helped you lot inward learning how to exercise labels driblet downwardly card inward Blogger. If you lot similar this post, delight portion your thoughts inward the comments department below.