Add AdSense Sticky Ad in AMP HTML BLogger

Tutorial: How to Add and Customize AdSense Ads Sticky on AMP blogger.

The Sticky / Floating ads at the bottom of the blog are considered to be one of the most effective ad placements and generate many clicks. For a blogger like me, of course this feature is very helpful to increase ad clicks on my blog.

While this type of advertising is essentially allowed by Google AdSense, there are still limitations or conditions from AdSense. For example, this sticky ad should not cover the screen or website view more than 15%.

So it's recommended that the ad has a 90px height for desktop mode, and a maximum of 100px for mobile web mode.

Then, how to add this sticky ad? Of course you have to provide special CSS code and input on your website so that sticky ads can appear.


But, for those of you who use a valid blogger page AMP HTML, no need to use special CSS code to install this ad sticky ad.

Simply add amp-sticky-ad only, and sticky ads will appear on the AMP blog. But you can still customize it with CSS.

Here I explain how to install Adsense Sticky Ads on AMP blog by using <amp-sticky-ad> .

Before you start the first step, make sure you've created a 320X100 or 320x50 AdSense ad unit on your Google AdSense dashboard. Then copy the ad unit code that you created it.

After that, the first thing you do is to install the following AMP sticky ad javascript before the code </ head>

Then find the code </ body>, and paste right on it:

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType != &quot;error_page&quot;'>
<amp-sticky-ad layout='nodisplay'>
<amp-ad data-ad-client='ca-pub-4026188032600094' data-ad-slot='9962051559' data-auto-format='rspv' data-full-width='true' height='320' type='adsense' width='100vw'>
<div overflow='true'/>
</amp-ad>
</amp-sticky-ad>
</b:if>

Note:
Make sure you've changed data-ad-client with your AdSense publisher, and data-ad-slot with sticky ad units you've created before..

Well, for those of you who want to customize the class amp-sticky-ad, it's okay. Live you use and customize # amp-sticky-ad on <style amp-custom> .
Baca: Asuransi Kendaraan
Berikut CSS yang saya gunakan.

/* Amp sticky Close Button */

.amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;right:0;background-image:url(https://image.flaticon.com/icons/png/128/109/109702.png);background-size:13px 13px;background-position:9px center;background-color:transparent;background-repeat:no-repeat;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;border-radius:10px}

Keep in mind that, this tutorial will only make your ad amp-sticky-ad appear if your visitor opens blog via smartphone only.