Membuat Label di Sidebar AMP Template Agar Tampilan Jadi Rapih

Ditulis oleh: Dibrata Nazar Yuda
Ditulis pada: Sunday, May 26, 2019

Hampir seharian ini saya disibukan dengan modifikasi tampilan blog yang pastinya untuk memudahkan navigasi seperti penambahan widget label saya saya terapkan dibagian sidebar (AMP sidebar).

Untuk diketahui bahwa pembuatan widget label disetiap template tidaklah sama, walaupun css yang dipakai kodenya itu - itu saja. Seperti halnya pada template blog yang saya pakai ini (Kompi ajaib v3) dan komiminimalis AMP V6 yang saya beli dari admin kompiajaib.com.

Jika anda mengunjungi blog Kompiajaib, disana anda akan mendapatkan informasi mengenai kode css yang bisa anda terapkan pada blog anda. Namun apabila anda menggunakannya secara mentah - mentah tanpa diatur kembali saya yakin hasilnya akan berantakan alias tidak rapih.

Oleh karena itu saya mencoba membuat artikel ini dengan tujuan untuk mempermudah cara pemasangan dan pengambilan beberapa kode css agar hasilnya bisa rapi. Secara khusus diperutukan untuk pengguna template kompiminimalis V6 dan kompi ajaib v3 yang masih kebingungan. Untuk template AMP yang lainnya belum saya coba, anda dapat melihat kode aslinya langsung di blog kompiajaib.

1. Template Kompi Ajaib V3

Untuk anda yang memakai template kompiajaib V3 seperti yang saya pakai sekarang, anda dapat memasangkan css yang telah saya modifikasi agar hasilnya menjadi rapih. Berikut ini adalah kode ccs-nya:

Silahkan anda copy kode CSS berikut dan paste-kan distyle amp-custom blog Anda.


#side-bar h6{background-color:transparent;border:none;font-size:16px;font-weight:500;margin:0 0 5px;padding:10px 20px}
#side-bar h6 svg{width:20px;height:20px;vertical-align:middle;float:right;}
amp-sidebar li.drop section{padding:0}
section:not([expanded]) .show-less,section[expanded] .show-more,#Label1 h6{display:none}
#Label1{margin:0;padding:0 20px}
#Label1 .label-size{position:relative;margin-bottom:5px;padding:0 50px 0 10px;background:rgba(255,255,255,.2);border-radius:3px;text-align:left;display:block;transition:all .4s ease-in-out;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
#Label1 .label-size a,#Label1 .label-size span{text-decoration:none;color:#fff;font-weight:500;font-size:16px;padding:6px 0;display:block;}
#Label1 .label-size span.label-count{position:absolute;top:0;right:10px;padding:6px 0;transition:all .4s ease-in-out;}
#Label1 .label-size:hover{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);}

CSS yang saya tandai warna kuning itu sudah ada ditemplate kompiajaib v3, namun kodenya berbeda. Oleh karena itu silahkan anda hapus dulu kode yang mirip seperti yang saya tandai tersebut. Jika sudah dihapus, sekarang sekarang copy paste semua css diatas ke blog anda.

Pasangkan juga widget labelnya dibagian sidebar, tepatnya dibawah logo_sidebar.


<li class='drop'>

<amp-accordion>

<section>

<h5>

<span class='show-more'>Kategori</span>

<span class='show-less'>Kategori</span>

<svg viewBox='0 0 24 24'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>

</h5>

<b:section class='sidebarmenu' id='sidebarmenu' preferred='yes'>

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>

<b:widget-settings>

<b:widget-setting name='sorting'>ALPHA</b:widget-setting>

<b:widget-setting name='display'>CLOUD</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'>

<h6><data:title/></h6>

</b:if>

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<b:if cond='data:display == &quot;list&quot;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>
</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if><div class='clear'/>

</div>

</b:includable>

</b:widget>

</b:section>

</section>

</amp-accordion>

</li>

2. Template Kompi Minimalis V6

Untuk CSS kompi minimalis V6, silahkan anda hapus semua kode css yang sudah ada dibagian /* AMP Sidebar */, kemudian ganti dengan css dibawah ini:


.btn-sidebaramp{display:inline-block;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%2311589D' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:35px 35px;background-position:center center;background-color:transparent;width:48px;height:48px;border:none;position:absolute;top:0;right:0;cursor:pointer}
amp-sidebar{width:300px;padding:0;background:#11589D}
.amp-close-image{top:15px;left:16px;cursor:pointer;}
amp-sidebar ul{margin-top:30px;padding:0;list-style:none;}
amp-sidebar li{margin:0;list-style:none;padding:10px 20px}
amp-sidebar li:first-child{padding-top:0;}
amp-sidebar li a{color:#efefef;font-weight:500;font-size:16px;display:block}
amp-sidebar li a:hover,amp-sidebar li a:visited{color:#fff}
amp-sidebar button{margin-left:20px}
#side-bar h5 {border:none;background-color:#11589D;font-size:16px;font-weight:500;color:#efefef;padding:5px 20px;margin:0 0 5px}
amp-sidebar ul li.drop ul{margin-top:10px}
amp-sidebar ul li.drop ul li,amp-sidebar ul li.drop ul li:first-child{padding:10px 20px 0 40px}
amp-sidebar li.drop{margin:0;list-style:none;padding:0}
amp-sidebar li.drop section{margin:0;list-style:none;padding:10px 0 0}
amp-sidebar li.drop li{border:0}
amp-sidebar li.drop li:last-child{padding:10px 20px 10px 40px;margin-bottom:-2px}
#side-bar h5 svg{width:20px;height:20px;vertical-align:middle;float:right;}
#side-bar h5 svg path{fill:#efefef}
.logo_sidebar{width:180px;height:auto;margin:40px auto 0}
.logo_sidebar span{position:fixed;top:-3000px;left:-3000px;opacity:0}
.follow_sidebar{line-height:normal;letter-spacing:normal;font-family:Roboto,sans-serif;text-transform:uppercase;font-weight:700;color:#fff;font-size:.94rem;padding-top:1.5rem;display:block;text-align:center;margin:0}
.ampstart-social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;display:block;text-align: center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}
.ampstart-social-follow li{display:inline-block;margin-right:0;padding:0}
.p1{padding:.5rem}
.inline-block{display:inline-block}
svg:not(:root){overflow:hidden}
.ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#fff}
amp-sidebar{scrollbar-width:none;}
amp-sidebar::-webkit-scrollbar{display:none}
section:not([expanded]) .show-less,section[expanded] .show-more,#Label1 h6{display:none}
#Label1{margin:0;padding:0 20px}
#Label1 .label-size{position:relative;margin-bottom:5px;padding:0 50px 0 10px;background:rgba(255,255,255,.2);border-radius:3px;text-align:left;display:block;transition:all .4s ease-in-out;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
#Label1 .label-size a,#Label1 .label-size span{text-decoration:none;color:#fff;font-weight:500;font-size:16px;padding:6px 0;display:block;}
#Label1 .label-size span.label-count{position:absolute;top:0;right:10px;padding:6px 0;transition:all .4s ease-in-out;}
#Label1 .label-size:hover{background:#262626;}

Kemudian pasang widgetnya seperti yang ada dibawah ini:


<li class='drop'>

<amp-accordion>

<section>

<h5>

<span class='show-more'>Kategori</span>

<span class='show-less'>Kategori</span>

<svg viewBox='0 0 24 24'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>

</h5>

<b:section class='sidebarmenu' id='sidebarmenu' preferred='yes'>

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>

<b:widget-settings>

<b:widget-setting name='sorting'>ALPHA</b:widget-setting>

<b:widget-setting name='display'>CLOUD</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'>

<h6><data:title/></h6>

</b:if>

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<b:if cond='data:display == &quot;list&quot;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if><div class='clear'/>

</div>

</b:includable>

</b:widget>

</b:section>

</section>

</amp-accordion>

</li>

Jika masih bingung penempatannya, anda dapat melihatnya dengan cara melihat kode sumber langsung atau CTRL + U di blog ini, atau lihat kode sumber aslinya dipostingan kompiajaib

Kedua cara diatas sudah saya terapkan diblog saya dan berhasil dengan tampilan yang menurut saya rapih.

Inti dari pemasangan widget ini yaitu harus bisa menyesuaikan dengan template yang anda pakai, jika ada kode css yang double sebaiknya dihapus salah satunya. Lakukan percobaan dan lakukan back up terlebih dahulu untuk menghindari kegagalan.

Membuat Label di Sidebar AMP Template Agar Tampilan Jadi Rapih

Ditulis oleh: Dibrata Nazar Yuda Ditulis pada: Sunday, May 26, 2019

1. Template Kompi Ajaib V3

2. Template Kompi Minimalis V6

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Dibrata Nazar Yuda
Ditulis pada: Sunday, May 26, 2019