Membuat Daftar Widget Daftar Label

Demo

Cara Instal Widget iLabels v1.0.6 by zkreations

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 zkreations */
#Label50,#Label50 .widget-content{position:relative!important;z-index:10;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:.3s -webkit-transform;transition:.3s transform;transition:.3s transform,.3s -webkit-transform}.iLabels__nav{height:0;position:absolute;top:100%;z-index:9999;width:100%;padding-top:1em;opacity:0;transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:transform .3s,visibility .3s,opacity .3s;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}.iLabels__link{display:flex;align-items:center;justify-content:space-between;font-weight:500}.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)}
/*
=> Personalizar
*/
/* Switch
 *------------------------ */
.iLabels__button {
  padding: 1.2em; /* Relleno */
  background: rgba(0, 0, 0, 0.05); /* Fondo */
  color: rgba(38, 50, 56, 0.5); /* Color */
}
.iLabels__button:hover {
  color: rgba(38, 50, 56, 0.75); /* Hover del boton */
}
/* Lista
 *------------------------ */
.iLabels__dropdown,
.iLabels__nav::before {
  background-color: #fff; /* Fondo */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Sombra */
}
.iLabels__dropdown {
  border-radius: 3px; /* bordes redondeados */
  max-height: 450px; /* Altura máxima */
}
/* Scrollbar
 *------------------------ */
.iLabels__dropdown::-webkit-scrollbar {
  width: 6px; /* Anchura */
}
.iLabels__dropdown::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* Color de fondo */
}
.iLabels__dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4); /* Color de barra */
}
/* Enlaces
 *------------------------ */
.iLabels__link {
  padding: 0.8em 1em; /* Relleno */
  color: rgba(0, 0, 0, 0.5); /* Color */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Bordes*/
}
.iLabels__num {
  color: rgba(0, 0, 0, 0.25); /* Color */
  font-size: 0.9em; /* Tamaño de fuente */
  font-weight: 700; /* grosor */
}

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

<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>
   <b:widget-settings>
      <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 id='labeldrop' class='labeldrop' type='checkbox'/>
            <label class='iLabels__button' for='labeldrop'>Elige una etiqueta</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:widget>

Jika sudah save
Masuk Tataletak disana ada widget baru muncul
Tentukan Posisi bebas liat blog :) 

Untuk Demo Bisa liat Blog admin Trimakasih
Semoga bermanfaat.