Membuat Iklan Sticky Adsense Melekat di Bawah

Memang Google melarang menggunakan sticky ads yaitu iklan yang melayang dan tampil terus ketika di scroll. Karena ini bisa mengganggu pengunjung blog.

Akan tetapi Google sendiri menyediakan iklan otomatis yang di dalamnya terdapat fitur iklan anchor yang di mana iklan akan tampil di bagian atas atau bawah layar.

Akan tetapi iklan anchor otomatis ini tidak mengganggu pengunjung, karena hanya memiliki tinggi 50px dan hanya tampil pada layar vertikal seperti pada smartphone dan jika pengunjung agak terganggu maka ada tombol untuk menyembunyikannya dengan mudah.

Serta juga kemunculan iklan anchor otomatis ini hanya di saat waktu yang optimal (sehingga tidak memberatkan pemuatan halaman).

Iklan sticky otomatis tentu tidak akan muncul halaman dekstop pc, maka solusinya ialah memasang dan membuat secara manual iklan sticky, yang akan muncul di bawah layar. Seperti pada gambar di atas, tampilannya dibuat mirip iklan sticky pada amp, cukup menarik untuk di coba.

Kalau masalah aman atau tidak, saya menganggapnya aman dengan syarat iklan tidak mengganggu pengunjung – baik itu iklan yang menutupi konten atau tata letak widget yang dapat menyebabkan klik tidak sengaja.

Dan jika tampilan iklan terlalu besar, itu yang tidak diperbolehkan. Bagaimana! apakah ingin mencoba membuat Iklan Sticky seperti amp sticky ad, berikut caranya:

Cara Membuat Iklan Melekat Sticky Ads Responsive

Simpah kode berikut di bagian paling bawah tag </body>, *penting.

Pilih Semua

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'><style>/*<![CDATA[mankoin.com*/.sticky-ad{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:sticky;text-align:center;left:0;width:100%;z-index:999;max-height:100px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out;max-width:100%;height:100px;bottom:0;-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}@keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-size:24px 24px;background-position:2px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:0;border-radius:12px 0 0 0;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");padding:0}/*]]>*/</style><div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-slot='9943136880' style='display:inline-block;width:970px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position=&apos;relative&apos;;this.style.display=&apos;none&apos;;'/></div><script>//<![CDATA[
function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]></script></b:if>

Setelah itu ganti kode iklan yang di mark dengan iklan Kamu. Saya sarankan untuk menggunakan kode iklan dengan lebar 970x90 atau 728x90. Karena dari percobaan saya unit yang 970x90 dapat tampil dengan baik, berbeda dengan unit responsive yang tidak muncul/tampil (bahkan iklan tidak di proses).

NB: Unit iklan 970x90 atau 728x90 juga dapat dimuat responsive secara otomatis.

Berikut yang mungkin harus anda tahu tentang script di atas:

Kode iklan di atas tidak akan ditampilkan pada halaman error dan statis/page. Serta hanya akan muncul di halaman dekstop, karena kalau halaman mobile cukup dengan iklan otomatis (anchor), serta jika iklan manual dengan tinggi 90px itu mungkin terlalu besar untuk tampilan mobile.

Iklan saya buat khusus, kode 300 untuk kondisi iklan akan muncul saat di scroll. Jelasnya, saat di scroll jika halaman sudah bergeser ke atas sepanjang 300px iklan akan muncul. Dan removeEventListener supaya script penampil iklan tidak berjalan lagi sehingga halaman menjadi lebih ringan.

Tidak menyertakan tombol tutup, akan tetapi tombol arah bawah maksudnya iklan tidak lagi ditampilkan secara sticky/melayang. Akan tetapi akan tampil di bagian paling bawah sesuai dengan letak kodenya. Itulah mengapa iklan harus diletakkan di bagian paling bawah.