Beranda / AMP Tutorial

Cara Buat Multi Tab Widget di Blogger AMP

Edit

Add Multi Tab Widget in AMP Blogger with amp-selector

Widget merupakan salah satu elemen penting jika kamu mempunyai sebuah halaman blog. Widget tersebut biasanya di tampilkan pada sdebar website anda. Widget tersebut bisa berisi iklan, related post, label, navigasi web, dan lain-lain.

Namun, ada masalah jika kita terlalu banyak membuat widget di sidebar. Tampilan website akan terlihat tidak rapih, jika tidak diimbangi dengan konten yang panjang.

Untuk mengakali hal inilah, banyak orang coba merapikannya dengan menggunakan multi tab widget. Jadi, mereka tetap bisa menampilkan banyak widget, namun website tetap terlihat rapih dan minimalis.

Jika di website berbasis HTML, biasanya untuk membuat multi tab widget ini diperlukan javascript jQuery, namun tentunya berbeda jika kamu punya website berbasis AMP HTML. Di AMP sendiri, kamu hanya membutuhkan javascript amp-selector yang sudah disediakan oleh ampproject.

Berikut cara membuat multi tab widget di blogger AMP dengan menggunakan amp-selector.

Cara Buat Multi Tab Widget di Blogger AMP

Untuk membuat muti tab widget pada blogger AMP, kamu harus menambahkan javascript amp-selector terlebih dahulu. Copy dan paste kode dibawah ini sebelum </head>

<script async='async' custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Kemudian, copy CSS untuk tampilan tab yang lebih baik. Tempelken kode ini diantara <style='amp-custom'> .... </style>

/*AMP TAB SELECTOR */  .ampTabContainer{display:flex;flex-wrap:wrap;margin:0;padding:5px;border-style:none}  .tabButton[selected]{outline:0;background:#19B5FE;border-style:none;border-radius:5px}  .tabButton{background:#fff;display:table-cell;width:31%;color:#000;padding:10px;font-size:14px;text-align:center;cursor:pointer;font-weight:700;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);border-left:1px solid rgba(0,0,0,.05);transition:all .3s}  .tabContent{display:none;width:100%;order:1}  .tabButton[selected]+.tabContent{display:block;outline:0}  .itemCustom{border:1px solid #000;height:280px;width:380px;margin:10px;text-align:center;padding-top:140px}  amp-selector [option][selected]{cursor:auto;outline:none;}  /*AMP TAB SELECTOR END*/

Lalu, tempatkan kode ini di manapun kamu mau. Jangan lupa untuk mengisi tiap konten. Ganti tanda warna kuning untuk meletakan konten.

     <amp-selector role="tablist" layout="container" class="ampTabContainer">
       <!-- TAB One -->
         <div role="tab" class="tabButton" selected option="a">Tab one</div>
         <div role="tabpanel" class="tabContent">
 ISI DENGAN CONTENT #1
       </div>
       <!-- TAB two -->
         <div role="tab" class="tabButton" option="b">Tab two</div>
         <div role="tabpanel" class="tabContent">
 ISI DENGAN CONTENT #2
       </div>
       <!-- TAB three -->
         <div role="tab" class="tabButton" option="c">Tab three</div>
         <div role="tabpanel" class="tabContent">
 ISI DENGAN CONTENT #3  
       </div>
     </amp-selector>

Lihat hasil di CODEPEN.

Semoga berguna :)