Memasang Widget Multi Tab Valid AMP di Blogger Template

Memasang Widget Multi Tab Valid AMP di Blogger Template

Memasang Widget Multi Tab Valid AMP di Blogger Template


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.

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.
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser