Floating banner adalah cara yang efektif untuk menarik perhatian pengunjung situs web Anda. Banner ini biasanya muncul beberapa detik setelah pengguna mengunjungi situs Anda dan dapat menampilkan berbagai jenis informasi, mulai dari pengumuman penting hingga penawaran spesial.
Dalam artikel ini, kita akan membahas cara membuat floating banner di WordPress tanpa menggunakan plugin.
Cara Membuat Floating Banner di WordPress
Menyiapkan Banner
Pertama, Anda harus menyiapkan banner yang ingin Anda tampilkan. Anda bisa membuat banner ini menggunakan berbagai perangkat lunak desain grafis dan menyimpannya dalam format PNG atau JPEG. Anda juga bisa membuat banner yang berbeda untuk perangkat desktop dan mobile.
Dalam contoh kode yang akan kami berikan nanti, kami akan memakai dua banner ini:
- Banner untuk versi desktop:
https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Desktop-DEVanoda.png - Banner untuk versi mobile:
https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Mobile-DEVanoda.png
Menambahkan HTML
Setelah menyiapkan banner, Anda perlu menambahkan beberapa kode HTML ke situs WordPress Anda. Kode ini harus ditambahkan ke file header.php atau footer.php dari tema Anda. Kode ini akan membuat div yang berisi banner dan tombol (X) untuk menutup banner.
<div id="popup-banner" style="display:none;">
<a href="https://volunoid.com">
<img id="desktop-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Desktop-DEVanoda.png" alt="Desktop Banner" />
<img id="mobile-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Mobile-DEVanoda.png" alt="Mobile Banner" />
</a>
<button id="close-banner">X</button>
</div>
Tampilan implementasi HTML ini, bisa Anda lihat pada gambar berikut:
Mengatur Gaya dengan CSS
Kode HTML saja tidak cukup. Anda perlu menambahkan beberapa gaya CSS untuk memastikan banner dan tombol (X) muncul dengan benar. Kode CSS ini dapat ditambahkan ke file CSS tema Anda atau di Appearance > Customize > Additional CSS.
#popup-banner {
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
padding: 20px;
border-radius: 10px;
box-sizing: border-box;
overflow: auto;
}
#desktop-banner {
display: block;
}
#mobile-banner {
display: none;
}
@media (max-width: 768px) {
#desktop-banner {
display: none;
}
#mobile-banner {
display: block;
}
}
#close-banner {
position: absolute;
top: 5px;
right: 5px;
width: 50px;
height: 50px;
background-color: #ffffff;
color: #000000;
border: 5px solid #000000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
font-size: 28px;
/* Penambahan untuk Flexbox */
display: flex;
justify-content: center;
align-items: center;
}
Tampilan implementasi CSS ini, bisa Anda lihat pada gambar berikut:
Membuat Banner Muncul dengan JavaScript
Sekarang, Anda perlu menambahkan beberapa kode JavaScript untuk membuat banner muncul setelah pengunjung mengunjungi situs Anda. Kode ini harus ditambahkan ke file header.php atau footer.php Anda, tepat sebelum tag penutup </body>.
Dalam kode JS yang kami berikan dibawah ini, juga terdapat fungsi supaya banner tidak muncul lagi setelah pengguna mengeklik tombol (X). Kode tambahan ini akan menyimpan status penutupan banner dalam penyimpanan lokal browser, dan kemudian memeriksa status ini setiap kali halaman dimuat.
window.onload = function() {
if (localStorage.getItem('bannerClosed') !== 'true') {
setTimeout(function() {
document.getElementById('popup-banner').style.display = 'block';
}, 3000);
}
document.getElementById('close-banner').onclick = function() {
document.getElementById('popup-banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
};
};
Tampilan implementasi JavaScript ini, bisa Anda lihat pada gambar berikut:
Semua Kode Banner
Keseluruhan kode CSS, JS dan HTML, sudah kami jadikan satu dalam script HTML berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Banner</title>
<style>
#popup-banner {
display: none;
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
padding: 20px;
border-radius: 10px;
box-sizing: border-box;
overflow: auto;
}
#desktop-banner {
display: block;
}
#mobile-banner {
display: none;
}
@media (max-width: 768px) {
#desktop-banner {
display: none;
}
#mobile-banner {
display: block;
}
}
#close-banner {
position: absolute;
top: 5px;
right: 5px;
width: 50px;
height: 50px;
background-color: #ffffff;
color: #000000;
border: 5px solid #000000;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="popup-banner">
<a href="https://volunoid.com">
<img id="desktop-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Desktop-DEVanoda.png" alt="Desktop Banner" />
<img id="mobile-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Mobile-DEVanoda.png" alt="Mobile Banner" />
</a>
<button id="close-banner">X</button>
</div>
<script>
window.onload = function() {
if (localStorage.getItem('bannerClosed') !== 'true') {
setTimeout(function() {
document.getElementById('popup-banner').style.display = 'block';
}, 3000);
}
document.getElementById('close-banner').onclick = function() {
document.getElementById('popup-banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
};
};
</script>
</body>
</html>
Fitur yang dimiliki kode banner ini
Kode banner yang kami tunjukan diatas, bukan kode biasa. Ada banyak kelebihan di dalam nya. Berikut penjelasan nya.
Tampilan Banner Otomatis
Banner ini dirancang untuk muncul secara otomatis setelah pengunjung mengakses situs. Dalam hal ini, banner muncul 3 detik setelah halaman dimuat. Waktu ini dapat disesuaikan sesuai kebutuhan.
Tombol Penutup (X)
Banner ini dilengkapi dengan tombol penutup berbentuk (X) yang memungkinkan pengunjung menutup banner tersebut. Tombol ini berada di pojok kanan atas banner dan mempunyai garis tepi hitam dengan bentuk bulat untuk memudahkan pengunjung mengidentifikasinya.
Ingatan Penyimpanan Lokal
Fitur penting lainnya dari banner ini adalah kemampuannya untuk “mengingat” apakah pengguna sudah pernah menutup banner atau belum. Jika pengunjung sudah menutup banner, banner ini tidak akan muncul lagi meski pengunjung melakukan refresh halaman. Hal ini dimungkinkan dengan memanfaatkan teknologi penyimpanan lokal (Local Storage) pada browser.
Responsif Terhadap Perangkat
Banner ini juga responsif terhadap perangkat yang digunakan pengunjung. Artinya, tampilan dan ukuran banner akan menyesuaikan diri tergantung apakah situs diakses melalui perangkat desktop atau mobile. Ini penting untuk memastikan kenyamanan dan pengalaman pengguna yang optimal.
Link ke Situs Lain
Banner ini tidak hanya sebagai media informasi atau pengumuman, tetapi juga berfungsi sebagai media promosi dengan memberikan tautan (link) ke situs lain. Dalam kasus ini, ketika banner diklik, pengunjung akan diarahkan ke situs yang telah ditentukan.
Dengan demikian, banner ini tidak hanya berfungsi sebagai media pengumuman, tetapi juga sebagai alat pemasaran yang efektif.
Tampilan Banner
Apabila Anda mengimplementasikan kode diatas, tampilan hasil floating banner yang muncul, akan menjadi seperti gambar dibawah ini.
Versi Desktop
Versi Mobile
Kustomisasi agar hanya muncul 2X saja, dan tidak ada link dalam banner
Untuk melakukan perubahan, jika tombol (X) yang ada di pojok kanan atas ditekan, banner akan muncul lagi. Jika ditekan lagi (dua kali) banner tidak akan muncul lagi, dan agar tautan dalam banner hilang, gunakan kode berikut.
Java Script
window.onload = function() {
let closeCount = 0;
if (localStorage.getItem('bannerClosed') !== 'true') {
setTimeout(function() {
document.getElementById('popup-banner').style.display = 'block';
}, 3000);
}
document.getElementById('close-banner').onclick = function() {
closeCount += 1;
if (closeCount < 2) {
document.getElementById('popup-banner').style.display = 'none';
setTimeout(function() {
document.getElementById('popup-banner').style.display = 'block';
}, 3000);
} else {
document.getElementById('popup-banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
}
};
};
Selanjutnya, untuk menghilangkan tautan dalam banner, Anda cukup menghapus elemen <a> dan </a> dari kode HTML Anda. Berikut adalah kode HTML yang diperbarui:
HTML
<div id="popup-banner" style="display:none;"> <img id="desktop-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Desktop-DEVanoda.png" alt="Desktop Banner" /> <img id="mobile-banner" src="https://devanoda.com/wp-content/uploads/2023/07/Sample-Banner-Mobile-DEVanoda.png" alt="Mobile Banner" /> <button id="close-banner">X</button> </div>
Sekarang, jika banner itu diklik, tidak akan mengarahkan ke halaman manapun. Dan jika tombol close di banner ditekan sekali, banner akan muncul lagi setelah tiga detik. Jika tombol close ditekan dua kali, banner akan tetap tertutup.
Sample Banner
Jika Anda ingin sample banner yang kami gunakan untuk membuat script diatas, silahkan unduh dibawah ini.
Type 1
Type 2
Untuk banner type 2 ini, adalah contoh yang sudah di implementasikan di dalam situs Volunoid.
Penutup
Demikianlah panduan tentang cara membuat floating banner di WordPress tanpa menggunakan plugin. Kami harap ini bermanfaat dan memungkinkan Anda untuk menambahkan elemen interaktif yang menarik ke situs web Anda.
Ingatlah bahwa kualitas konten Anda tetap menjadi faktor terpenting dalam menarik dan mempertahankan pengunjung. Banner ini hanyalah salah satu dari banyak alat yang dapat Anda gunakan untuk meningkatkan pengalaman pengguna di situs web Anda.
Selamat mencoba dan terus berkreasi dengan situs WordPress Anda!
