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, Salah satu pendukung tampilan dari suatu layout template di blogger yakni dengan memasang widget. Pada umumnya, untuk para blogger, pada suatu template wajib mempunyai beberapa widget menyerupai widget popular post, recent post, archive, label, dsb.

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



Mengapa harus memasang widget multi tab? Perlu aku 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 yakni dengan memanfaatkan multitab widget, jadi dalam satu widget sidebar kita dapat tampilkan 3-4 widget sekaligus dengan memamfaatkan komponen tab.

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

Dengan memakai 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 sajian Tema template blogger
• Copy script dibawah ini kemudian taruh di atas aba-aba </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 aba-aba CSS dibawah ini, kemudian 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 aba-aba HTML dibawah ini kemudian 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.