Skip to main content

follow us


Bloggerntt.com - Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML - 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.

Baca juga :

  1. Cara Memasang Image Lightbox Valid AMP Blogger Template
  2. Memasang Widget Multi Tab Valid AMP di Blogger Template 2019
  3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
  4. Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger
  5. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP


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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar