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}
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='"label-size-" + 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 + "-label-widget-content"'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' 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>
Masuk Tataletak disana akan ada widget baru muncul.
Untuk Demo Bisa liat Blog admin Trimakasih
Semoga bermanfaat.
Posting Komentar