Iklan Billboard 970x250

Artikel Terkait

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

×
Cara Pasang Tab Panel di Postingan Blogger Valid AMP HTML

Iklan 728x90

Cara Pasang Tab Panel di Postingan Blogger Valid AMP HTML

    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.

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

    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.
    Baca Juga
    SHARE
    Marko Kono
    Hi, My name is Marko. Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Tapaleuk, hehehe 😃 Selain blogging, punya pekerjaan pribadi sebagai Staf Teknik bagian Pengawasan Proyek. Teknik Sipil menjadi bagian tak terpisahkan dari kehidupanya.
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post