√ Menciptakan Tab Panel Di Dalam Postingan Blog Amp Html

Membuat Tab Panel Di Dalam Postingan blog merupakan cara yang sempurna untuk membantu pembaca blog kita memahami apa yang ingin kita maksud, Selain itu memakai Tab Panel juga hal yang dapat kau lakukan jikalau kau ingin postingan kau terlihat lebih simpel.

Dan untuk AMP HTML, kita dapat menciptakan tab panel dengan memakai amp-selector. Dengan element tersebut kita dapat menciptakan tab panel menjadi lebih mudah.

Jika kita mempunyai postingan yang berada di dalam tab panel sangat panjang, Kita dapat menambahkan Read More untuk mempercanti tampilan tersebut.

Jika anda ialah pengguna template AMP, kau tidak dapat memakai tab panel dengan jquery namun kau dapat menciptakan tab panel tersebut tampil di blog AMP kau dengan memakai CSS.

Walapun postingan ini saya tujukan untuk pengguna AMP yang ingin menciptakan tab panel, Namun kau dapat juga memakai ini di postingan artikel non AMP kamu.

Membuat Tab Panel Di Dalam Postingan Blog AMP dan Non AMP

Membuat Tab Panel Di Dalam Postingan blog merupakan cara yang sempurna untuk membantu pembaca √ Membuat Tab Panel Di Dalam Postingan Blog AMP HTML 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.

Hal pertama yang harus kau lakukan jikalau ingin menciptakan tab panel ini ialah masuk kehalaman dasboard blogger kamu, Kemudian pilih hidangan Template lanjut dengan menentukan Edit HTML

Kemudian cari isyarat </head> (Gunakan Kombinasi Tombol CTRL+F Untuk Mempermudah Menemukan Kode Tersebut)

Copy isyarat dibawah ini, kemudian letakan sempurna di atas isyarat </head> tadi

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

Untuk Mode penulisan dihalaman postingan, Silahkan lihat dihalaman Selanjutnya

Silahkan gunakan isyarat berikut pada postingan mode html.

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

Maka kesudahannya akan ibarat ini:

Atau jikalau ingin menambahkan Read More silahkan gunakan isyarat ini.

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

Hasilnya akan tampil ibarat ini.

Nah itulah panduan Membuat Tab Panel Di Dalam Postingan Blog AMP HTML, Selamat mencoba dan biar bermanfaat.

Sumber aciknadzirah.blogspot.com