Cara Membuat Sticky Floating Ads Dengan Tombol Close – Sticky floating ads merupakan jenis iklan yang menempel atau melayang di layar website. Banyak yang beranggapan iklan ini memiliki impresi yang tinggi. Sehingga banyak yang memasangnya untuk meningkatkan pendapatan.
Sebenarnya, google adsense telah menyediakan pilihan jenis iklan anchor otomatis yang muncul di bagian atas layar website. Meskipun begitu, banyak yang membuat sticky floating ads tersebut muncul di bawah halaman.
Sticky floating ads ini akan terus mengikuti ketika kita scroll halaman ke atas atau ke bawah. Biasanya iklan ini dilengkapi tombol close (x), sehingga dapat ditutup dengan mudah. Nah, bagi yang ingin membuat sticky floating ads dengan tombol close, silahkan simak panduan berikut ini.
Cara Membuat Sticky Floating Ads Dengan Tombol Close
Di wordPress, untuk memasang sticky floating ads sangat mudah, karena terdapat plugin floating ads bottom yang dapat digunakan untuk membuatnya. Namun, panduan berikut ini adalah membuat sticky floating ads tanpa plugin untuk tampilan mobile.
Untuk membuat sticky floating ads dengan tombol close di wordPress, langkah-langkahnya adalah sebagai berikut:
1. Menambahkan Kode CSS
Langkah pertama adalah menambahkan kode css tambahan.
Silahkan masuk ke dashboard wordPress, pilih menu Appearance = Customize = Additional CSS. Tempelkan code css berikut ini dan klik publish.
| .sticky-ad { display: none; text-align: center; bottom: 0px; 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, 0.2); margin-bottom: 0; padding-top: 2px; transition: all .4s ease-in-out; } @media only screen and (max-width: 480px) { .sticky-ad{ display: flex; -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: fixed; text-align: center; } } .sticky-ad-close-button { position: absolute; width: 10px; height: 10px; top: -20px; right: -10px; background-image: url(“data:image/svg+xml;charset=utf8,%3csvg width=’13’ height=’13’ viewBox=’341 8 13 13′ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’%3e%3cg%3e%3cpath style=’fill:%234F4F4F’ d=’M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z’%3e%3c/path%3e%3c/g%3e%3c/svg%3e”); background-size: 10px 10px; background-position: 10px; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 10px 0 0 0; cursor: pointer; } .sticky-ad-close-button:before { position: absolute; content: “”; top: -20px; right: 0; left: -20px; bottom: 0; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } :active, :focus { outline: 0 } |
Silahkan lakukan penyesuaian pada ukuran-ukurannya, karena tampilannya dapat berbeda-beda tergantung theme yang digunakan.
2. Membuat Unit Iklan
Langkah kedua adalah membuat unit iklan baru atau memodifikasi kode iklan yang ada. Kode iklan untuk sticky floating ads dengan tombol close (x) adalah sebagai berikut:
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx“
crossorigin=”anonymous”></script>
<div class=’sticky-ad’ id=’sticky-ad’>
<!– Sticky Ads Mobile –>
<ins class=”adsbygoogle”
style=”display: inline-block; width:100%; height:100px;”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx“
data-ad-slot=”xxxxxxx“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!– Sticky Ads Mobile –>
<button aria-label=’Close this ad’ class=’sticky-ad-close-button’ onclick=’document.getElementById('sticky-ad').style.display='none';’/>
</div>
Silahkan ganti xxxxxxxxxxxxxxxx dengan kode google adsense Anda. Tentukan juga ukuran iklan yang diinginkan.
Demikianlah tutorial cara membuat sticky floating ads dengan tombol close. Semoga bermanfaat.
Baca Juga :
