Iklan Billboard 970x250

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 )

×
Memasang Widget Multi Tab Valid AMP di Blogger Template 2019

Iklan 728x90

Memasang Widget Multi Tab Valid AMP di Blogger Template 2019


    Bloggerntt.com - Memasang Widget Multi Tab Valid AMP di Blogger Template, Salah satu pendukung tampilan dari suatu layout template di blogger adalah dengan memasang widget. Pada umumnya, untuk para blogger, pada suatu template wajib memiliki beberapa widget seperti widget popular post, recent post, archive, label, dsb.

    Anda bisa lihat pada gambar dibawah ini, widget default dari blogger :



    Mengapa harus memasang widget multi tab? Perlu saya jelaskan, semakin banyak kita memasang widget di template blog, blog kita akan terlihat ramai/kacau tampilanya dikarenakan banyaknya widget yang berjejer disepanjang sidebar blog. Tentunya, pengunjung akan bosan.

    Baca juga :

    1. Cara Mendapatkan Matched Content Dari Google Adsense untuk Blogger
    2. Daftar HPK (High Paying Keywords) Google Adsense Indonesia 2019 Terbaru
    3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
    4. Alternatif AdSense 2019, 3 Situs Penyedia Iklan Terbaik Untuk Blog Valid AMP Template
    5. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP

    Nah salah satu cara untuk mengatasi banyaknya widget pada suatu blog adalah dengan memanfaatkan multitab widget, jadi dalam satu widget sidebar kita bisa tampilkan 3-4 widget sekaligus dengan memamfaatkan komponen tab.

    Salah satu kelebihan AMP template adalah, multi tab widget yang dipasang hanya perlu menggunakan komponen amp-selector yang disediakan ampproject.

    Dengan menggunakan widget multi tab, blog akan terlihat rapi. Tertarik mencobanya? Ikuti cara penerpanya dibawah ini :

    Cara Memasang atau Membuat Multi Tab Widget di Template Blogger Valid AMP :


    • Masuk ke menu Tema template blogger
    • Copy script dibawah ini lalu taruh di atas kode </head>. Jika pada template blog Anda sudah terpasang script ini, lewati saja langkah ini.

    
    <script async='async' custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    
    • Copy kode CSS dibawah ini, lalu simpan di antara <style='amp-custom'> .... </style>.

    
    /*Multi Tab AMP */
    .ampTabContainer{display:flex;flex-wrap:wrap;margin:0;padding:5px;border-style:none} .tabButton[selected]{outline:0;background:#19B5FE;border-style:none;border-radius:5px} .tabButton{background:#fff;display:table-cell;width:31%;color:#000;padding:10px;font-size:14px;text-align:center;cursor:pointer;font-weight:700;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);border-left:1px solid rgba(0,0,0,.05);transition:all .3s} .tabContent{display:none;width:100%;order:1} .tabButton[selected]+.tabContent{display:block;outline:0} .itemCustom{border:1px solid #000;height:280px;width:380px;margin:10px;text-align:center;padding-top:140px} amp-selector [option][selected]{cursor:auto;outline:none;}
    /*Multi Tab AMP end*/
    
    • Berikutnya, Anda copy paste kode HTML dibawah ini lalu taruh dibagian yang Anda sukai.

    
    <amp-selector role="tablist" layout="container" class="ampTabContainer">
          <!-- TAB One -->
            <div role="tab" class="tabButton" selected option="a">Tab one</div>
            <div role="tabpanel" class="tabContent">
    #1 LETAKAN KONTEN ANDA DISINI (HTML,GAMBAR DLL)
          </div>
          <!-- TAB two -->
            <div role="tab" class="tabButton" option="b">Tab two</div>
            <div role="tabpanel" class="tabContent">
    #2 LETAKAN KONTEN ANDA DISINI (HTML,GAMBAR DLL)
          </div>
          <!-- TAB three -->
            <div role="tab" class="tabButton" option="c">Tab three</div>
            <div role="tabpanel" class="tabContent">
    #3 LETAKAN KONTEN ANDA DISINI (HTML,GAMBAR DLL)
          </div>
        </amp-selector>
    
    • Semoga bermamfaat sob, 

    Sekian artikel Memasang Widget Multi Tab Valid AMP di Blogger Template . Selamat bereksprimen.
    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