Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / AMP Tutorial

Cara Buat Multi Tab Widget Di Blogger Amp

Add Multi Tab Widget in AMP Blogger with amp-selector



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

Namun, ada problem kalau kita terlalu banyak menciptakan widget di sidebar. Tampilan website akan terlihat tidak rapih, kalau tidak diimbangi dengan konten yang panjang.

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

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

Berikut cara menciptakan multi tab widget di blogger AMP dengan memakai amp-selector. 

Cara Buat Multi Tab Widget di Blogger AMP

Untuk menciptakan muti tab widget pada blogger AMP, kau harus menambahkan javascript amp-selector terlebih dahulu. Copy dan paste aba-aba 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 aba-aba 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 aba-aba ini di manapun kau 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 mempunyai kegunaan :)