Widget Tag List Dropdown
Pada kesempatan kali ini kita akan membuat daftar label dropdown untuk blogger dengan hanya menggunakan css.
Tutorial Blog: Cara Membuat Label List Dropdown
Instalasi
Masuk blogger: Theme > Customise
/*! Widget: iLabels v1.0.6 */
#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;
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)}
/*
=> Personalize
*/
/* Switch
*------------------------ */
.iLabels__button {
padding: 1.2em;
background: #666;
color: #fff;
}
.iLabels__button:hover {
color: #ddd;
}
/* List
*------------------------ */
.iLabels__dropdown,
.iLabels__nav::before {
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.iLabels__dropdown {
border-radius: 3px;
max-height: 450px;
}
/* Scrollbar
*------------------------ */
.iLabels__dropdown::-webkit-scrollbar {
width: 6px;
}
.iLabels__dropdown::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1);
}
.iLabels__dropdown::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
}
/* Links
*------------------------ */
.iLabels__link {
padding: 0.8em 1em;
color: rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.iLabels__num {
color: rgba(0, 0, 0, 0.25);
font-size: 0.9em;
font-weight: 700;
}Apply to Blog
Kembali ke menu Theme > Edit HTML, kemudian tambahkan kode berikut ini tepat sebelum kode
</b:section><b:widget id='Label50' title='Drop-down tags' 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'>Choose a tag</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:widget>
Biasanya ada beberapa, sesuaikan dengan widget template blog kamu.
Save theme
Result