How To Practise Labels Drib Downwardly Card Inward Blogger

In the past, nosotros cause got shown y'all how to display labels inwards Blogger, How to means Labels inwards Blogger together with How to Rename Labels inwards Blogger. Recently, i of our users asked us virtually How to practise Labels Drop Down Menu inwards Blogger. If your spider web log has a lot of labels, together with then showing a Label widget inwards your sidebar would cause got a lot of space. Therefore, a Label or category drib Down bill of fare volition easily concord to a greater extent than than hundreds of labels without taking a large space. In this article, nosotros volition demonstrate y'all how to practise labels drib downwards bill of fare inwards Blogger.

Why to Use Labels Drop Down Menu:

You mightiness cause got used the default Label widget provided past times Blogger but if y'all cause got a lot of labels, together with then it would cause got a lot of infinite on your blog. Therefore, it volition brand your spider web log await unprofessional together with untidy at the same time.

The principal role of using labels drib downwards bill of fare is to salve your spider web log infinite together with brand your spider web log await to a greater extent than professional person together with presentable. Therefore, if y'all desire to add together Label drib downwards bill of fare inwards Blogger follow the tutorial below.

Create Labels Drop Down Menu inwards Blogger:

1. The real kickoff affair y'all demand to practise is to Add a Labels Widget to your spider web log (If y'all 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, y'all demand to add together CSS codes to your Blogger template. Therefore, Go to Blogger >> Template >> Edit HTML and search for peel tag. After finding the peel tag, merely inwards a higher house 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 corporation 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 affair we'll live on doing is to add together HTML codes to your template therefore labels tin business office every bit drib downwards 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 supervene upon the inwards a higher house 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 y'all inwards learning how to practise labels drib downwards bill of fare inwards Blogger. If y'all similar this post, delight part your thoughts inwards the comments department below.