How To Practise Labels Drib Downwardly Carte Inward Blogger

In the past, nosotros create got shown you lot how to display labels inwards Blogger, How to mode Labels inwards Blogger as well as How to Rename Labels inwards Blogger. Recently, i of our users asked us well-nigh How to create Labels Drop Down Menu inwards Blogger. If your weblog has a lot of labels, as well as therefore showing a Label widget inwards your sidebar would create 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 demo you lot how to create labels drib downwards bill of fare inwards Blogger.

Why to Use Labels Drop Down Menu:

You mightiness create got used the default Label widget provided past times Blogger but if you lot create got a lot of labels, as well as therefore it would create got a lot of infinite on your blog. Therefore, it volition brand your weblog hold off unprofessional as well as untidy at the same time.

The principal role of using labels drib downwards bill of fare is to relieve your weblog infinite as well as brand your weblog hold off to a greater extent than professional person as well as presentable. Therefore, if you lot 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 rattling starting fourth dimension matter you lot demand to produce is to Add a Labels Widget to your weblog (If you lot create 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 peel tag. After finding the peel tag, merely inwards a higher house it glue the next code:
   

/* Dropdown Label */
.dropmedown choose {
    outline: none;
    cursor: pointer
}
.dropmedown {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border: 1px company 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 side past times side matter we'll live on doing is to add together HTML codes to your template therefore labels tin forcefulness out component equally 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 supersede the inwards a higher house code alongside 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 inwards learning how to create labels drib downwards bill of fare inwards Blogger. If you lot similar this post, delight percentage your thoughts inwards the comments department below.

Baca Juga