Membuat Daftar Widget Daftar Label
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 bab " Custom CSS ", di mana kami akan menempelkan aba-aba 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 */ } Pilih "Edit html", CTRL+F Carai </b:section> Tempatkan aba-aba dibawah ini sempurna diatas </b:section> , Penempatan bebas ingin di atas widget atau di footer bebas
Related
<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 gres muncul
Tentukan Posisi bebas liat blog :)
Untuk Demo Bisa liat Blog admin Trimakasih
Semoga bermanfaat.
Sumber https://www.merpatih.com/
