How to Add Multi Tab Widget in AMP Blogger

Widget are an important element if you have a blog page. Widget are usually displayed on your website sidebar. These widget can contain ads, related post, labels, web navigation, and more. 

However, there is a problem if we create too many widgets in the sidebar. Display the website will look neat, if not offset by the long content. ad: situs bandar jud

To outsmart this, many people try to tidy up by using multi tab widget. So, they can still display many widgets, but the website still looks neat and minimalist.

If the HTML-based website, usually to create multi tab widget using jQuery javascript, different if you have a website based on AMP HTML. In AMP itself, you only need a javascript amp-selector that already provided by ampproject.

Here's how to create multi-tab widget in AMP blogger by using amp-selector. 

To create a multi tab widget on AMP blogger, you must add javascript amp-selector first. Copy and paste the code below before </ head>

Then, copy CSS for better tab view. Paste this code in between <style amp-custom='amp-custom'> .... </style>

/*AMP TAB SELECTOR */

.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;}


/*AMP TAB SELECTOR END*/

Then, paste this code wherever you want. Do not forget to fill in each content. Replace yellow to put content. ie: in sidebar by adding new HTML widget on Blogger layout dashboard

    <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">
YOUR WIDGET CONTENT #1
      </div>
      <!-- TAB two -->
        <div role="tab" class="tabButton" option="b">Tab two</div>
        <div role="tabpanel" class="tabContent">
YOUR WIDGET CONTENT #2
      </div>
      <!-- TAB three -->
        <div role="tab" class="tabButton" option="c">Tab three</div>
        <div role="tabpanel" class="tabContent">
YOUR WIDGET CONTENT #3 
      </div>
    </amp-selector>

See result at CODEPEN.

Thanks for read :)