Membuat Widget Daftar Label List Dropdown

Cara Instal Widget iLabels v1.0.6

Mungkin kalian sedang mencari widget label yang minimalis, karna label/kategori di blog yang begitu banyak dapat memakan ruang yang banyak juga. kali ini admin akan membagikan tutorial cara pasang widget label dengan list daftar label dengan gaya menu dropdown show hide.

Lnjut aja ke caranya dibawah ini.

Pertama Buka Blogger -bagian " Tema ", tekan tombol " Customize " dan di perancang template Blogger pergi ke opsi lanjutan , di bagian " Custom CSS ", di mana kami akan menempelkan kode berikut:

/*! Widget: iLabels v1.0.6 | by bertips.com */
#Label50,#Label50 .widget-content{position:relative!important;z-index:5;overflow:initial!important}.labeldrop:checked~.iLabels__button::before{position:fixed;top:0;left:0;width:100%;z-index:800;content:"";cursor:default;height:100%}.widget.Label,.widget.Label .widget-content{overflow:initial!important}.labeldrop{display:none}.iLabels{font-size:14px;position:relative}.iLabels__button{display:flex;justify-content:space-between;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;transition:color .3s}.iLabels__button::after{content:"";width:8px;height:8px;display:block;border-right:3px solid;border-bottom:3px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.iLabels__nav{height:0;position:absolute;top:100%;z-index:9999;width:100%;padding-top:1em;opacity:0;transition:transform .3s,visibility .3s,opacity .3s,-webkit-transform .3s;-webkit-transform:translate(0,2em);transform:translate(0,2em);visibility:hidden}.iLabels__dropdown{overflow-y:auto;border-radius:3px;max-height:450px}.labeldrop:checked~.iLabels__button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.iLabels__nav{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);height:auto}.iLabels__nav::before{content:"";display:block;top:8px;position:absolute;right:1em;width:14px;height:14px;z-index:-1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.iLabels__button{padding:1.2em;background:rgba(0,0,0,.05);color:rgba(38,50,56,.5)}.iLabels__button:hover{color:rgba(38,50,56,.75)}.iLabels__dropdown,.iLabels__nav::before{background-color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.iLabels__dropdown::-webkit-scrollbar{width:6px}.iLabels__dropdown::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1)}.iLabels__dropdown::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4)}.iLabels__link{display:flex;align-items:center;justify-content:space-between;font-weight:500;padding:.8em 1em;color:rgba(0,0,0,.5);border-bottom:1px solid rgba(0,0,0,.05)}.iLabels__num{color:rgba(0,0,0,.25);font-size:.9em;font-weight:700}

Jika sudah lalu save kembali ke thema
Pilih "Edit html", CTRL+F Carai </b:section> Tempatkan kode dibawah ini tepat diatas </b:section> , Penempatan bebas ingin di atas widget atau di footer bebas, kalau admin sendiri mengantikan posisi widget label sebelumnya dan di timpah dengan label list ini.

   <b:widget id='Label50' locked='false' title='' type='Label' version='2' visible='true'>
                          <b:widget-settings>
                            <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
                            <b:widget-setting name='display'>LIST</b:widget-setting>
                            <b:widget-setting name='selectedLabelsList'/>
                            <b:widget-setting name='showType'>ALL</b:widget-setting>
                            <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
                          </b:widget-settings>
                          <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
         <div class='iLabels'>
            <input class='labeldrop' id='labeldrop' type='checkbox'/>
            <label class='iLabels__button' for='labeldrop'>Label</label>
            <nav class='iLabels__nav'>
            <div class='iLabels__dropdown'>
            <b:loop values='data:labels' var='i'>
            <a class='iLabels__link' expr:href='data:i.url'><data:i.name/>
               <b:if cond='data:showFreqNumbers'>
                 <span class='iLabels__num'><data:i.count/> posts</span>
               </b:if>
     		</a>   
            </b:loop> 
           </div>
           </nav>
        </div>
     </div>    

     </b:includable>
                          <b:includable id='cloud'>
  <b:loop values='data:labels' var='label'>
    <span class='label-size'>
      <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/>
      <a class='label-name' expr:href='data:label.url'>
        <data:label.name/>
        <b:if cond='data:this.showFreqNumbers'>
          <span class='label-count'><data:label.count/></span>
        </b:if>
      </a>
    </span>
  </b:loop>
</b:includable>
                          <b:includable id='content'>
  <div class='widget-content'>
    <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
    <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
    <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  </div>
</b:includable>
                          <b:includable id='list'>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <a class='label-name' expr:href='data:label.url'>
          <data:label.name/>
          <b:if cond='data:this.showFreqNumbers'>
            <span class='label-count'><data:label.count/></span>
          </b:if>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>

Jika sudah save.
Masuk Tataletak disana akan ada widget baru muncul.

Untuk Demo Bisa liat Blog admin Trimakasih
Semoga bermanfaat.