Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML

Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML

Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML


BloggerNTT - Sobat blogger, membuat atau memasang Tab Panel Di Dalam Postingan Blog AMP HTML sangatlah mudah. Dengan adanya tab panel kita bisa membuat postingan menjadi lebih singkat dan pendek saat postingan kita memiliki beberapa bagian.

Dengan adanya tab panel di postingan blog, pengunjung akan lebih mudah untuk membaca bagian-bagian postingan kita.
Pada AMP HTML, kita bisa membuat tab panel dengan menggunakan amp-selector. Dengan element tersebut kita bisa membuat tab panel menjadi lebih mudah dan gampang.

Selain itu, kita juga bisa menambahkan fungsi read more pada tab panel sehingga tampilan tab panel menjadi lebih simple dengan tombol read more.

Berikut ini cara untuk mulai membuat tab panel dengan amp-selector pada blog amp, silahkan Anda 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>

Berikutnya Anda  tambahkan kode css berikut pada style amp-custom di 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;}
 Selanjutnya, untuk menampilkan tab panel di dalam postingan blog amp, silahkan Anda ikuti langkah-langkah di bawah ini :

1. Tab Panel Tanpa Read More



Anda bisa gunakan kode dibwah ini 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

Anda gunakan kode dibawah ini pada postingan mode html.

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

Berikut ini contoh penerapan tab panel dengan tombol read more :



Bagaimana sob? sangat mudah untuk diterapkan di posting blog kan?. Semoga artikel Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML bermanfaat untuk Anda.
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser