Changing the Widget Label Function to Dropdown

Changing the Label Widget Function to Dropdown - In the third post today Arlina Design will share a tutorial on how to Change the Widget Label Function to Dropdown. As we know in the settings the Blogger Label widget has two functions and views, namely the display of the label and cloud label list widget.

But here I will give another option from the label widget that can be made a dropdown, it looks exactly the same as the dropdown display in the archive widget.

The purpose of changing the display of this label widget is to save space on the blog page if there are already many labels on your blog that make the blog look narrow because it is not just the widget widget on the blog. Besides that, your blog will look neater and professional.

For those who want to try it, please follow the following tutorial:

Changing the Widget Label Function to Dropdown

1. Open Blogger> Templates> Then search for this code

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

Replace all the above code with this 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> 

Change posts marked with your friend's writing.

2. Next, add the code below before ]]></b:skin> or </style>

/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{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}
.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. Save the template and see the results. 


Thus the tutorial Changing the Widget Label Function to Dropdown, hopefully useful.