Membuat Tab Panel Di Dalam Postingan Blog Amp Html

Sebenarnya aku sebelumnya sudah menciptakan tab panel dengan jquery namun tentu saja tidak dapat dipakai pada amp html. Kemudian aku kembali menciptakan tab panel hanya dengan CSS saja biar dapat dipakai oleh blog amp dan non amp.

Dan sekarang kita akan menciptakan 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 menciptakan tab panel dengan amp-selector pada blog amp, silahkan simpan arahan berikut di atas arahan </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 arahan berikut pada postingan mode html jikalau ingin menyerupai 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 arahan berikut pada postingan mode html jikalau ingin menyerupai 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">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>

Selamat mencoba dan semoga bermanfaat....
Sumber https://www.kompiajaib.com/

Share this post