Pengenalan
Iklan anchor adalah salah satu bentuk iklan yang tetap terlihat oleh pengguna meskipun mereka menggulir halaman web. Iklan ini biasanya ditempatkan di bagian bawah layar dan tetap berada di sana saat pengguna menggulir konten. Jenis iklan ini sangat efektif karena tetap berada dalam pandangan pengguna tanpa mengganggu pengalaman membaca mereka. Pada artikel ini, kita akan membahas cara membuat iklan anchor tambul di bawah layar menggunakan HTML dan CSS.
1. **Membuat Struktur HTML**
Langkah pertama dalam membuat iklan anchor adalah menyiapkan struktur HTML. Anda perlu membuat div untuk menampung iklan Anda dan menempatkannya di bagian bawah halaman.
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iklan Anchor di Bawah Layar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<!-- Konten utama halaman Anda -->
<h1>Selamat Datang di Blog Saya</h1>
<p>Ini adalah contoh konten yang akan menggulir di belakang iklan anchor.</p>
</div>
<div class="anchor-ad">
<p>Iklan Anda di sini</p>
</div>
</body>
</html>
```
Dalam kode di atas, kami membuat dua div utama: satu untuk konten halaman utama dan satu lagi untuk iklan anchor. Div dengan kelas `anchor-ad` akan berfungsi sebagai tempat iklan.
2. **Menambahkan CSS untuk Iklan Anchor**
Setelah struktur HTML selesai, langkah berikutnya adalah menambahkan CSS untuk membuat iklan anchor tetap berada di bawah layar saat pengguna menggulir halaman.
```css
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
.content {
padding: 20px;
}
.anchor-ad {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f8d7da;
color: #721c24;
text-align: center;
padding: 10px 0;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.anchor-ad p {
margin: 0;
font-size: 16px;
}
```
Dalam kode CSS di atas, kami menggunakan properti `position: fixed` untuk menempatkan iklan di bagian bawah layar. Properti `bottom: 0` memastikan bahwa iklan berada di bawah halaman, sementara properti `width: 100%` memastikan iklan mengisi lebar layar. Kami juga menambahkan padding dan warna latar belakang untuk membuat iklan terlihat menonjol.
3. **Menambahkan Tombol Tutup**
Untuk meningkatkan pengalaman pengguna, sebaiknya tambahkan tombol tutup pada iklan anchor sehingga pengguna dapat menutup iklan jika mereka mau.
```html
<div class="anchor-ad">
<p>Iklan Anda di sini</p>
<button class="close-btn">X</button>
</div>
```
Tambahkan tombol tutup dalam div `anchor-ad` dan tambahkan CSS untuk tombol tersebut.
```css
.anchor-ad .close-btn {
position: absolute;
right: 10px;
top: 10px;
background-color: transparent;
border: none;
font-size: 16px;
cursor: pointer;
color: #721c24;
}
```
Dengan menambahkan tombol tutup dan stylingnya, sekarang kita perlu menambahkan fungsionalitas JavaScript untuk menutup iklan ketika tombol ditekan.
4. **Menambahkan Fungsionalitas JavaScript**
Langkah terakhir adalah menambahkan JavaScript untuk membuat tombol tutup berfungsi.
```html
<script>
document.addEventListener("DOMContentLoaded", function() {
var closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', function() {
var anchorAd = document.querySelector('.anchor-ad');
anchorAd.style.display = 'none';
});
});
</script>
```
Dengan menambahkan script di atas, ketika tombol tutup ditekan, iklan anchor akan disembunyikan.
Kesimpulan
Membuat iklan anchor tambul di bawah layar menggunakan HTML dan CSS adalah proses yang cukup sederhana dan dapat meningkatkan efektivitas iklan Anda tanpa mengganggu pengalaman pengguna. Dengan menggunakan properti CSS `position: fixed`, Anda dapat memastikan iklan tetap terlihat saat pengguna menggulir halaman. Menambahkan tombol tutup dengan fungsionalitas JavaScript memberikan fleksibilitas tambahan bagi pengguna yang ingin menutup iklan.
Ingatlah untuk selalu menguji iklan Anda di berbagai perangkat dan resolusi layar untuk memastikan tampilannya optimal di semua lingkungan. Selain itu, pastikan iklan Anda tidak mengganggu konten utama situs web Anda dan memberikan nilai tambah bagi pengunjung situs Anda.
Dengan mengikuti langkah-langkah di atas, Anda sekarang dapat membuat iklan anchor tambul yang efektif dan ramah pengguna di situs web Anda. Selamat mencoba!