Cara Menambahkan Iklan Floating di Kiri dan Kanan Website

Pendahuluan

Iklan floating adalah cara efektif untuk menarik perhatian pengunjung tanpa mengganggu konten utama di website Anda. Dengan menempatkan iklan di sisi kiri dan kanan layar, Anda dapat memaksimalkan potensi klik sambil menjaga desain tetap profesional. Artikel ini akan memberikan panduan lengkap cara menambahkan iklan floating di website, baik untuk platform Blogger maupun WordPress.

Apa Itu Iklan Floating?

Iklan floating adalah jenis iklan yang tetap terlihat meskipun pengguna menggulir halaman website. Iklan ini biasanya ditempatkan di sisi kiri dan kanan layar untuk memaksimalkan visibilitas tanpa mengganggu konten utama.

Langkah-Langkah Menambahkan Iklan Floating

1. Menambahkan Kode HTML dan CSS

Gunakan kode berikut untuk membuat iklan floating di kiri dan kanan website Anda:

<!-- Iklan Floating Kiri -->
<div id="floating-left">
    <a href="https://linkiklananda.com" target="_blank">
        <img src="https://via.placeholder.com/120x600" alt="Iklan Kiri">
    </a>
</div>

<!-- Iklan Floating Kanan -->
<div id="floating-right">
    <a href="https://contohsaja.com" target="_blank">
        <img src="https://contohsaja.com/120x600" alt="Iklan Kanan">
    </a>
</div>

<!-- CSS untuk Floating Iklan -->
<style>
    #floating-left, #floating-right {
        position: fixed;
        top: 100px; /* Jarak dari atas */
        width: 120px; /* Lebar iklan */
        z-index: 1000; /* Supaya selalu di atas elemen lainnya */
    }

    #floating-left {
        left: 10px; /* Jarak dari sisi kiri */
    }

    #floating-right {
        right: 10px; /* Jarak dari sisi kanan */
    }

    #floating-left img, #floating-right img {
        max-width: 100%;
        height: auto;
        border: none;
    }
</style>

2. Menambahkan Kode di Blogger

Untuk pengguna Blogger:

1. Masuk ke akun Blogger Anda.

2. Pilih blog yang ingin Anda tambahkan iklan.

3. Pergi ke menu Tata Letak.

4. Klik Tambahkan Gadget → pilih HTML/JavaScript.

5. Tempelkan kode HTML dan CSS di atas.

6. Klik Simpan, lalu periksa blog Anda.

3. Menambahkan Kode di WordPress

Untuk pengguna WordPress:

1. Masuk ke dashboard WordPress.

2. Pergi ke menu Appearance → Widgets.

3. Tambahkan widget Custom HTML di area mana pun.

4. Tempelkan kode di atas.

5. Klik Simpan, lalu lihat hasilnya.

4. Menambahkan Tombol Tutup (Opsional)

Agar pengguna bisa menutup iklan, tambahkan tombol tutup menggunakan kode berikut:

<!-- Tombol Tutup -->
<div id="floating-left">
    <button onclick="document.getElementById('floating-left').style.display='none'">&times;</button>
    <a href="https://contohsaja.com" target="_blank">
        <img src="https://contohsaja.com/120x600" alt="Iklan Kiri">
    </a>
</div>

<style>
    #floating-left button {
        position: absolute;
        top: -10px;
        right: -10px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
</style>

Tips untuk Pengguna

1. Pastikan Responsif: Gunakan media queries untuk menyembunyikan iklan di layar kecil.

   @media (max-width: 768px) {
       #floating-left, #floating-right {
           display: none;
       }
   }

2. Kepatuhan Kebijakan Iklan: Jika menggunakan Google AdSense, pastikan iklan floating tidak melanggar kebijakan mereka.

3. Ukuran Gambar: Gunakan ukuran gambar iklan yang sesuai, seperti 120x600 atau 300x250, agar terlihat profesional.

Kesimpulan

Dengan mengikuti panduan di atas, Anda dapat menambahkan iklan floating di kiri dan kanan website Anda dengan mudah. Iklan floating ini dapat membantu meningkatkan pendapatan dari iklan tanpa mengganggu pengalaman pengguna. Selalu pastikan iklan yang Anda tampilkan sesuai dengan kebijakan platform dan responsif di berbagai perangkat.