✔ Cara Buat Multi Tab Widget Di Blogger Amp

Add Multi Tab Widget in AMP Blogger with amp-selector

Widget merupakan salah satu elemen penting bila kau memiliki 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 duduk kasus bila kita terlalu banyak menciptakan widget di sidebar. Tampilan website akan terlihat tidak rapih, bila 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 j4vascript jQuery, namun tentunya berbeda bila kau punya website berbasis AMP HTML. Di AMP sendiri, kau hanya membutuhkan j4vascript 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 j4vascript amp-selector terlebih dahulu. Copy dan paste arahan 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 arahan 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 arahan 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 berkhasiat :)

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: