Cara Membuat Tab Panel di Postingan Blog Valid AMP

Halo sahabat Pena Info, berkembangnya teknologi membuat kita harus berinovasi agar dapat bersaing.

Nah jika anda memiliki blog atau website yang menggunakan AMP (Accelerated Mobile Page), anda dapat berinovasi dengan menambahkan tab panel pada postingan blog anda.

Jika artikel yang anda buat memiliki beberapa bagian atau sub bagian tertentu, tab panel ini sangat cocok untuk anda terapkan.

Fungsi tab panel ini adalah untuk membatasi bagian yang satu dengan yang lainnya. Selain itu dapat membuat artikel yang anda posting menjadi lebih pendek dan simpel.

Anda juga dapat menambahkan read more pada setiap tab dalam panel tersebut.

Hal ini juga menjadikan blog anda lebih user friendly, karena pengunjung dapat lebih mudah membaca setiap bagian-bagian dalam postingan anda.

Nah bagaimana caranya agar tab panel tersebut valid AMP? Berikut ini Pena Info akan memberikan tutorial cara membuat tab panel di dalam postingan blog valid AMP.

Langkah 1
Tambahkan kode berikut ini "di atas" kode </head>

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

Langkah 2
Tambahkan CSS berikut ini pada bagian 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;}

Langkah 3
Untuk menampilkan tab panel tersebut di dalam postingan anda, silahkan ikuti langkahnya di bawah ini.

Tab panel tanpa read more
Copy kode berikut ini dan Paste di postingan anda pada mode HTML, kemudian ganti dengan kalimat/konten yang anda inginkan.

<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> <br/>
</amp-selector> <br/>

Tab panel dengan read more

Copy kode berikut ini dan Paste di postingan anda pada mode HTML, kemudian ganti dengan kalimat/konten yang anda inginkan.

    <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">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">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">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> 

Bagaimana sahabat Pena Info, mudah bukan? Sekian tutorial kali ini, selamat mencoba dan semoga bermanfaat.