Cara Membuat Iklan Melayang (Floating) dengan Tombol Close – Artikel kali ini, saya ingin bagikan cara membuat iklan melayang (floating) dengan tombol close. Iklan ini tampil di area bawah blog dan responsive. Memang, per 13 Desember 2022, Google Adsense akan mulai menampilkan iklan floating di kanan dan kiri (sidebar), terutama bila website atau blog dibuka dengan desktop/laptop. Bahkan sebenarnya, iklan floating bottom ini sudah ada lebih
dahulu, hanya saja, cuma tampil di mobile device.

Kalau begitu, untuk apa membuat sendiri kalau Adsense sudah menyediakan itu?

Iklan floating ini akan muncul kalau kita mengaktifkan auto ads. Jadi, Google akan mencarikan spot-spot strategis secara otomatis. Jadi, seandainya kita tidak mengaktifkan auto ads, maka tidak ada iklan ini. Itu kenapa kita harus buat sendiri.

Memang ada ya yang tidak mengaktifkan auto ads ini?

Ada. Bahkan banyak. Bisa karena pertimbangan layout, bisa karena memang pemilik blog ingin menampilkan iklan sesuai keinginannya sendiri.

Alasan lainnya, mungkin saja kita ingin menampilkan banner lain selain adsense. Kita bisa manfaatkan cara ini.

Ok langsung saja,

Cara Membuat Iklan Melayang (Floating) dengan Tombol close

Simpan kode di bawah ini di atas/sebelum kode </body>

<div class='MS-ads jhfdiuh0' id='MS-ads'>
<div class='MS-ads-close' onclick='document.getElementById(&quot;MS-ads&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='MS-ads-content'>
<center>
<style>
<!-- kode css di sini(misal adsense) -->
</style>
<!-- kode iklan di sini -->
</center>
</div>
</div>

Tambahkan kode CSS berikut untuk mengatur tampilannya.

.MS-ads { position: fixed; bottom: 0px; left: 0; width: 100%; min-height: 100px; max-height: 125px; padding: 5px 5px; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; } .MS-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .MS-ads .MS-ads-close svg { width: 22px; height: 22px; fill: #000; } .MS-ads .MS-ads-content { overflow: hidden; display: block; position: relative; height: 90px; width: 100%; margin-right: 10px; margin-left: 10px; }

Simpan.

Itu saja. Kode di atas adalah untuk iklan adsense.