Great News! Try our new tool to convert img to amp-img. Try Now!

Tuesday, July 10, 2018

How to Add Multi Tab Widget in AMP Blogger

How to Add Multi Tab in AMP Blogger with amp-selector. Add multi tab pure CSS in blogspot blog. AMP tab tutorial

Add Multi Tab Widget in AMP Blogger with amp-selector

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. 

 Multi Tab Widget in Blogger AMP 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>

<script async='async' custom-element="amp-selector" src=""></script>

Then, copy CSS for better tab view. Paste this code in between <style amp-custom='amp-custom'> .... </style>
.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}
.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;}

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">
      <!-- TAB two -->
        <div role="tab" class="tabButton" option="b">Tab two</div>
        <div role="tabpanel" class="tabContent">
      <!-- TAB three -->
        <div role="tab" class="tabButton" option="c">Tab three</div>
        <div role="tabpanel" class="tabContent">

See result at CODEPEN.

Thanks for read :)