Cara Membuat Iklan AdSense Melayang Pop-up Melayang di Bawah dengan Tombol Close

Pendahuluan

Dalam dunia blogging, monetisasi website menjadi salah satu tujuan utama bagi banyak pemilik blog. Salah satu cara yang populer untuk menghasilkan pendapatan dari blog adalah melalui program periklanan seperti Google AdSense. Namun, untuk meningkatkan pendapatan dari iklan, penting untuk menampilkan iklan secara strategis. Dalam artikel ini, kita akan membahas cara membuat iklan AdSense melayang pop-up melayang di bawah dengan tombol close menggunakan kode HTML, baik untuk platform Blogspot maupun WordPress.

Mengapa Membuat Iklan Melayang?

Sebelum kita masuk ke langkah-langkah teknisnya, penting untuk memahami mengapa membuat iklan melayang bisa menjadi strategi yang efektif. Iklan yang melayang atau pop-up melayang dapat menarik perhatian pengunjung dengan cara yang tidak mengganggu konten utama. Mereka juga dapat meningkatkan tingkat klik dan konversi karena terlihat dengan jelas oleh pengunjung.

Langkah-langkah untuk Blogspot

1. Buat Kode HTML Iklan AdSense

Langkah pertama adalah membuat kode HTML untuk iklan AdSense yang ingin Anda tampilkan. Anda dapat membuat iklan responsif atau kustom sesuai kebutuhan Anda.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="your-ad-client-id"
     data-ad-slot="your-ad-slot-id"
     data-ad-format="auto"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2. Tambahkan CSS untuk Membuat Iklan Melayang

Tambahkan CSS untuk membuat iklan melayang di bawah konten utama dengan tombol close. Anda dapat menyesuaikan gaya sesuai keinginan Anda.

<style>
   .floating-ad-container {
       position: fixed;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 9999;
       background-color: #fff;
       padding: 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   .close-btn {
       position: absolute;
       top: 5px;
       right: 5px;
       cursor: pointer;
   }
</style>

3. Tambahkan Kode JavaScript untuk Menutup Iklan

Tambahkan kode JavaScript untuk membuat tombol close berfungsi dengan baik.

<script>
   function closeAd() {
       document.getElementById('floating-ad').style.display = 'none';
   }
</script>

4. Gabungkan Semua Kode

Gabungkan semua kode di atas dan tambahkan ke bagian HTML template atau di bagian yang ingin Anda tampilkan iklan tersebut.

<div id="floating-ad" class="floating-ad-container">
   <!-- Kode iklan AdSense -->
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="your-ad-client-id"
        data-ad-slot="your-ad-slot-id"
        data-ad-format="auto"></ins>
   <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
   <!-- Tombol Close -->
   <span class="close-btn" onclick="closeAd()">X</span>
</div>

Langkah-langkah untuk WordPress

1. Buat Kode HTML Iklan AdSense

Langkah pertama sama dengan pada platform Blogspot, yaitu membuat kode HTML untuk iklan AdSense yang ingin Anda tampilkan.

2. Tambahkan Kode PHP untuk Memasukkan Kode HTML

Tambahkan kode PHP di file template WordPress Anda untuk memasukkan kode HTML iklan tersebut.

<?php if (is_single()) : ?>
   <div id="floating-ad" class="floating-ad-container">
      <!-- Kode iklan AdSense -->
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="your-ad-client-id"
           data-ad-slot="your-ad-slot-id"
           data-ad-format="auto"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      <!-- Tombol Close -->
      <span class="close-btn" onclick="closeAd()">X</span>
   </div>
<?php endif; ?>

3. Tambahkan CSS dan JavaScript

Tambahkan CSS dan JavaScript seperti pada langkah-langkah Blogspot untuk mengatur tampilan dan fungsi tombol close.

Kesimpulan

Membuat iklan AdSense melayang pop-up melayang di bawah dengan tombol close dapat menjadi strategi yang efektif untuk meningkatkan pendapatan dari blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menampilkan iklan tersebut baik pada platform Blogspot maupun WordPress. Ingatlah untuk selalu mengikuti pedoman dan kebijakan dari Google AdSense agar akun Anda tetap aman dan berkinerja optimal. Semoga artikel ini bermanfaat dan sukses untuk meningkatkan pendapatan dari blog Anda!