Cara Pasang Iklan Adsense Sticky Ads di Blog AMP

Iklan Adsense melayang atau mengambang, atau istilah populernya "sticky ads" di bagian atas atau bawah blog sebenarnya sudah bisa otomatis muncul di tampilan "mobile" jika kita memasang kode iklan Adsense "auto ads". Namun, untuk blog yang mempergunakan templat AMP, iklan melayang ini masih belum bisa otomatis muncul meskipun sudah dipasang kode "auto ads" tersebut di blog.

Untuk mengatasi hal ini, berikut langkah-langkah yang bisa dijalankan untuk memasang iklan adsense melayang di bagian bawah blog AMP.

Siapkan terlebih dahulu satu unit iklan adsense responsif ukuran apa saja di akun Adsense Anda.

Pasang kode javascript "AMP sticky ad" berikut sebelum kode </head>:

<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;">
<script async="async" custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
</b:if>

Kemudian cari kode </body>, dan pasang kode berikut tepat di atasnya :

<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-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='true' height='320' type='adsense' width='100vw'>

<div overflow='true'/>
</amp-ad>

</amp-sticky-ad>

</b:if>

Ganti data-ad-client dengan kode publisher AdSense Anda, dan data-ad-slot dengan unit iklan sticky yang sudah disiapkan sebelumnya.

Dan yang terakhir, untuk pengaturan kustomisasi tombol penutup iklannya, tempatkan kode CSS berikut di bawah kode <style amp-custom='amp-custom'> :

/* AMP Sticky Close Button */ 
.amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;left:0;background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KICA8Zz4KICAgIDxwYXRoIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiIGZpbGw9IiMwMDAwMDAiLz4KICA8L2c+Cjwvc3ZnPgo=);background-size:13px 13px;background-position:50% center;background-repeat:no-repeat;background-color:#969595;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;width:80px;border-radius:50px 50px 0 0;}

/* DIV AMP-STICKY-AD */ amp-sticky-ad[visible]{border-top-style: solid; border-top-color: #969595; border-top-width: 10px;}

Simpan templat. Perlu diperhatikan bahwa tutorial ini hanya akan menampilkan iklan "amp-sticky-ad" jika pengunjung mengakses blog Anda melalui media telepon seluler pintar atau "smartphone".

Selamat mencoba, semoga bermanfaat.