Inserting Adsense Ads in the Sidebar Blog AMP HTML

How to Inserting Adsense Ads in the Sidebar Blog AMP HTML - AMP Templates for Blogger are quite complicated and need to understand HTML enough to use it. That's because the Blogger HTML template cannot be used carelessly like a regular Blogger template so that AMP does not become an error.

But in my opinion there is a good side in using AMP templates on Blogger, that is, we learn to make web pages / posts correctly, that is, they do not use inline CSS which can inhibit blog loading.

And this post I made to answer template users' questions with AMP only in mobile URLs, specifically the AMP template from Magic Company, which is how to save Adsense ads in the AMP blog sidebar.

To save Adsense ads in the AMP sidebar blog, please copy the following code and save it between widgets in the sidebar via EDIT HTML.

          <b:widget id='HTML123' locked='false' title='' type='HTML' version='1'>

            <b:widget-settings>

              <b:widget-setting name='content'><![CDATA[<!--iklan-->]]></b:widget-setting>

            </b:widget-settings>

            <b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-format='rectangle' data-ad-slot='xxxxxxxxx' style='display:block'/>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

  </b:if>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>

  <div overflow=''/>

</amp-ad>

  </b:if>

  </div>

</b:includable>

          </b:widget>

The code above shows regular ads on desktop displays and AMP ads on the mobile display. You just adjust it data-ad-client and data-ad-slot according to your ad code. The ads in the code above use a text ad unit and responsive image.

If anyone doesn't understand, please ask in the comments column.