Karir Bekasi – Iklan melayang atau floating ads merupakan salah satu jenis iklan digital yang muncul di tengah-tengah halaman website atau blog. Jenis iklan ini cukup efektif dalam menarik perhatian pengunjung dan meningkatkan konversi. Namun, iklan melayang yang tidak responsif dapat mengganggu pengalaman pengunjung dan berdampak negatif terhadap citra website atau blog Anda. Oleh karena itu, pada artikel kali ini, kami akan membahas cara membuat iklan melayang responsive dengan tombol X.
Langkah 1: Persiapkan Kode Iklan
Sebelum membuat iklan melayang, pertama-tama Anda perlu menyiapkan kode iklan. Anda dapat menggunakan kode iklan dari Google Adsense atau platform iklan lainnya. Pastikan kode iklan sudah mendukung tampilan responsive. Setelah itu, simpan kode iklan tersebut.
Langkah 2: Tambahkan Kode CSS
Tambahkan kode CSS untuk membuat iklan melayang menjadi responsif. Kode CSS yang digunakan adalah sebagai berikut:
.floating-ads {
display: none;
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 500px;
width: 100%;
height: auto;
text-align: center;
animation: fadeInUp 1s ease-in-out;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.floating-ads .close-btn {
position: absolute;
top: 5px;
right: 5px;
font-size: 16px;
cursor: pointer;
}
@media (max-width: 767px) {
.floating-ads {
max-width: 90%;
}
}
Penjelasan kode CSS di atas adalah sebagai berikut:
- .floating-ads adalah class untuk iklan melayang. Kode CSS ini akan membuat iklan melayang berada di bagian bawah halaman dan memiliki lebar maksimum sebesar 500px. Jika lebar layar kurang dari 767px, maka lebar iklan melayang akan menyesuaikan menjadi 90% dari lebar layar.
- @keyframes adalah kode CSS untuk animasi iklan melayang. Animasi ini akan membuat iklan melayang muncul secara perlahan dari bawah ke atas.
- .close-btn adalah class untuk tombol X. Tombol ini akan ditempatkan di sudut kanan atas iklan melayang dan memiliki ukuran font sebesar 16px.
- Tambahkan kode CSS di atas ke dalam file CSS website atau blog Anda.
Langkah 3: Tambahkan Kode JavaScript
Tambahkan kode JavaScript untuk mengaktifkan iklan melayang dan tombol X. Kode JavaScript yang digunakan adalah sebagai berikut:
window.onload = function() {
setTimeout(showFloatingAds, 10000);
};
function showFloatingAds() {
var floatingAds = document.querySelector('.floating-ads');
floatingAds.style.display = 'block';
}
function hideFloatingAds() {
Setelah menambahkan kode JavaScript untuk menampilkan iklan melayang, tambahkan kode JavaScript untuk menyembunyikan iklan melayang ketika tombol X diklik. Kode JavaScript yang digunakan adalah sebagai berikut:
var closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', function() {
var floatingAds = document.querySelector('.floating-ads');
floatingAds.style.display = 'none';
});
Penjelasan kode JavaScript di atas adalah sebagai berikut:
- window.onload adalah fungsi yang akan dijalankan ketika halaman website atau blog sudah selesai dimuat. Fungsi ini akan menampilkan iklan melayang setelah 10 detik.
- showFloatingAds() adalah fungsi yang digunakan untuk menampilkan iklan melayang dengan mengubah style display menjadi ‘block’.
- hideFloatingAds() adalah fungsi yang digunakan untuk menyembunyikan iklan melayang ketika tombol X diklik. Fungsi ini akan mengubah style display menjadi ‘none’.
- var closeBtn adalah variabel untuk menangkap elemen tombol X dengan class ‘.close-btn’.
- closeBtn.addEventListener() adalah fungsi untuk menambahkan event listener pada tombol X. Fungsi ini akan mengeksekusi fungsi hideFloatingAds() ketika tombol X diklik.
- Tambahkan kode JavaScript di atas ke dalam file JavaScript website atau blog Anda.
Langkah 4: Tambahkan Kode HTML
Tambahkan kode HTML untuk menampilkan iklan melayang dan tombol X. Kode HTML yang digunakan adalah sebagai berikut:
<div class="floating-ads">
<!-- Tempatkan kode iklan di sini -->
<span class="close-btn">×</span>
</div>
Penjelasan kode HTML di atas adalah sebagai berikut:
- <div class=”floating-ads”> adalah tag div dengan class ‘floating-ads’. Tag div ini digunakan untuk membungkus iklan melayang.
- <span class=”close-btn”>×</span> adalah tag span dengan class ‘close-btn’. Tag span ini digunakan untuk menampilkan tombol X dengan tanda silang (×).
Tambahkan kode HTML di atas ke dalam halaman website atau blog Anda.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat iklan melayang responsive dengan tombol X. Iklan melayang yang responsif akan memastikan pengalaman pengunjung yang lebih baik, sedangkan tombol X akan memberikan opsi untuk menghilangkan iklan melayang jika pengunjung tidak tertarik. Semoga artikel ini bermanfaat dan membantu Anda dalam membuat iklan melayang yang responsif dan efektif.