Membuat Tab Panel Di Dalam Postingan Blog AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/02/2018

Membuat Tab Panel Di Dalam Postingan Blog AMP HTML - Dengan tab panel kita bisa membuat postingan menjadi lebih simple dan pendek ketika postingan memiliki beberapa bagian. Dengan tab panel, pengunjung menjadi lebih mudah untuk membaca bagian-bagian postingan.

Dan untuk AMP HTML, kita bisa membuat tab panel dengan menggunakan amp-selector. Dengan element tersebut kita bisa membuat tab panel menjadi lebih mudah.

Kita juga bisa menambahkan fungsi read more pada content tab panel sehingga tampilan tab panel menjadi lebih simple.

Sebenarnya saya sebelumnya sudah membuat tab panel dengan jquery namun tentu saja tidak bisa digunakan pada amp html. Kemudian saya kembali membuat tab panel hanya dengan CSS saja agar bisa digunakan oleh blog amp dan non amp.

Dan kini kita akan membuat tab panel khusus untuk blog amp dengan amp-selector. Kita juga akan menambahkan fungsi read more pada content tab panel dengan memanfaatkan css selector untuk element dengan identitas khusus dan css selector untuk element di luar element lain.

Untuk mulai membuat tab panel dengan amp-selector pada blog amp, silahkan simpan kode berikut di atas kode </head>

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

Kemudian tambahkan css berikut pada style amp-custom blog amp Anda.

.ampTabContainer{display:flex;flex-wrap:wrap}

amp-selector [option][selected]{outline:0;background:#efefef;border:1px solid #ddd;border-radius:4px 4px 0 0;border-bottom:none}

.tabButton{list-style:none;flex-grow:1;text-align:center;cursor:pointer;padding:10px 0;border:1px solid transparent;margin-bottom:-1px;z-index:1;font-size:16px;font-weight:bold;color:#333;text-transform:uppercase;}

.tabContent{display:none;width:100%;order:1;background:#efefef;border:1px solid #ddd;padding:10px 15px 25px;position:relative;}

.tabButton[selected]+.tabContent{display:block;max-height:unset;overflow:hidden}

#content-more[style="display: none;"]~.tabContent,#content-more[hidden]~.tabContent{max-height:150px;}

.tabContent .more{position:absolute;left:0;bottom:0;width:100%;background:0 0;height:25px;line-height:25px;cursor:pointer}

#content-more[style="display: none;"]~.tabContent .more,#content-more[hidden]~.tabContent .more{background:#fff;}

.tabContent .more:before{content:"Content Less";text-transform:uppercase;font-size:90%;font-weight:bold;display:block;text-align:center;}

#content-more[style="display: none;"]~.tabContent .more:before,#content-more[hidden]~.tabContent .more:before{content:"Read More";}

.tabContent .more:after{content:"";background:#fff;background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);position:absolute;bottom:100%;left:0;width:100%;height:70px;display:none;}

#content-more[style="display: none;"]~.tabContent .more:after,#content-more[hidden]~.tabContent .more:after{display:block;}

:focus,:active{outline:0;}

Kemudian untuk menampilkan tab panel di dalam postingan, silahkan ikuti langkahnya di bawah ini.

1. Tab panel tanpa read more

Silahkan gunakan kode berikut pada postingan mode html jika ingin seperti demo di atas.

<amp-selector role="tablist" layout="container" class="ampTabContainer">

        <div role="tab" class="tabButton" selected option="a">Tab one</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

        </div>

        <div role="tab" class="tabButton" option="b">Tab two</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

        </div>

        <div role="tab" class="tabButton" option="c">Tab three</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

        </div>

</amp-selector>

2. Tab panel dengan read more

Silahkan gunakan kode berikut pada postingan mode html jika ingin seperti demo di atas .

    <amp-selector role="tablist" layout="container" class="ampTabContainer">

    <div id="content-more" hidden></div>

        <div role="tab" class="tabButton" selected option="a" on="tap:content-more.hide" tabindex="0">Tab one</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>

        </div>

        <div role="tab" class="tabButton" option="b" on="tap:content-more.hide" tabindex="0">Tab two</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>

        </div>

        <div role="tab" class="tabButton" option="c" on="tap:content-more.hide" tabindex="0">Tab three</div>

        <div role="tabpanel" class="tabContent">

Konten simpan di sini....

<div class="more" on="tap:content-more.toggleVisibility" aria-label="More" role="button" tabindex="0"></div>

        </div>

    </amp-selector>

Selamat mencoba dan semoga bermanfaat....