Cara Memasang Floating Ads Responsive Mobile Friendly di Blogger

Table of Contents

Menempatkan iklan di blog adalah salah satu cara terbaik untuk memonetisasi konten yang Anda buat. Namun, tidak semua jenis iklan efektif untuk menarik perhatian pengunjung. Salah satu metode yang semakin populer adalah penggunaan floating ads yang responsif. Iklan ini tidak hanya menarik perhatian, tetapi juga tetap terlihat baik di berbagai ukuran layar. Dalam artikel ini, kita akan membahas cara memasang iklan melayang (floating ads) yang responsif di Blogger menggunakan script khusus.

Sebelum kita masuk ke Tutorialnya, penting untuk memahami mengapa iklan melayang menjadi pilihan yang efektif. Iklan melayang (floating ads) memiliki beberapa keuntungan, antara lain:

1. Visibilitas Tinggi: Iklan melayang tetap berada di layar pengunjung meskipun mereka menggulir halaman, sehingga meningkatkan peluang untuk dilihat dan diklik.

2. Responsif: Dengan menggunakan teknik yang tepat, iklan melayang dapat disesuaikan untuk berbagai ukuran layar, mulai dari desktop hingga ponsel.

3. Interaktif: Iklan melayang sering kali lebih interaktif dan menarik perhatian dibandingkan dengan iklan statis yang berada di satu posisi tetap.

Cara Memasang Floating Ads Responsive di Blogger 

Langkah pertama adalah memastikan blog Anda siap untuk menampilkan iklan floating. Ini berarti Anda harus memiliki akses ke template blog Anda dan kemampuan untuk mengedit HTML serta menambahkan kode JavaScript.

1. Login ke Blogger: Masuk ke akun Blogger Anda dan buka dashboard blog yang ingin Anda tambahkan iklan melayang.

2. Pilih Template: Di sisi kiri, klik "Theme" atau "Tema".

3. Edit HTML: Klik "Edit HTML" untuk membuka editor kode dari template Anda.

Menambahkan Script Floating Ads Blogger

Sekarang, kita akan menambahkan script yang akan memungkinkan iklan melayang (floating ads) di blog Anda. Berikut adalah kode floating ads Responsive Blogger Silahkan kalian tambahkan sebelum kode <data:post.body> pada template blogger untuk menambahkan floating ads di postingan blogger.

See the Pen Contoh iklan by Bang Domath (@domathid) on CodePen.

Penjelasan Kode Script Floating Ads Blogger 

Berikut adalah Penjelasan kode iklan Responsive Blogger Silahkan kalian tambahkan sebelum kode <data:post.body> pada template blogger untuk menambahkan iklan melayang di postingan blogger.

#ad-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
#close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
@media (max-width: 768px) {
    #ad-widget {
        bottom: 10px;
        right: 10px;
        width: 100%;
        max-width: 300px;
    }
}
@media (max-width: 480px) {
    #ad-widget {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
    }
    #close-btn {
        top: 10px;
        right: 10px;
    }
}

- #ad-widget: Ini adalah container utama untuk widget iklan Anda. Iklan ini ditempatkan secara tetap (position: fixed) di pojok kanan bawah layar dengan beberapa gaya visual seperti latar belakang putih, border, dan bayangan untuk memisahkan iklan dari konten utama.

- #close-btn: Ini adalah tombol untuk menutup widget iklan. Ditempatkan di sudut kanan atas dari widget iklan dengan gaya transparan dan ukuran font besar untuk memudahkan pengguna menutup iklan.

- Media Queries:

  - @media (max-width: 768px): Ketika lebar layar maksimal 768px, ukuran widget akan beradaptasi agar lebih kecil dan menyesuaikan posisi.

  - @media (max-width: 480px): Ketika lebar layar maksimal 480px, widget akan merespons dengan menyesuaikan lebar menjadi 100% dari layar, serta merubah gaya untuk mengakomodasi ukuran layar kecil.

<div id="ad-widget">
<button id="close-btn">X</button>

<ins class="adsbygoogle" data-ad-client="ca-pub-XXXXXXX" data-ad-format="auto" data-ad-slot="XXXXXXXXX" data-full-width-responsive="true" style="display: block;"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

- <div id="ad-widget">: Container utama untuk widget iklan.

- <button id="close-btn">&times;</button>: Tombol untuk menutup iklan dengan ikon '×'.

  - <ins class="adsbygoogle": Container untuk iklan AdSense.

  - data-ad-client: ID klien AdSense Anda.

  - data-ad-slot: ID slot iklan yang telah Anda buat di AdSense.

  - data-ad-format: Format iklan, auto memungkinkan AdSense untuk memilih format iklan yang paling sesuai.

  - data-full-width-responsive: Menentukan apakah iklan akan menyesuaikan lebarnya secara otomatis sesuai dengan lebar container.

<script>
document.getElementById('close-btn').addEventListener('click', function() {
document.getElementById('ad-widget').style.display = 'none';
});
</script>

- Event Listener: Menambahkan event listener ke tombol close-btn. Ketika tombol diklik, fungsi ini akan mengatur tampilan widget iklan (ad-widget) menjadi none, sehingga menyembunyikan iklan dari layar pengguna.

Dengan kode ini, Anda dapat menampilkan iklan melayang yang responsif di blog Anda. Iklan ini dirancang agar tetap terlihat rapi dan tidak mengganggu, serta dilengkapi dengan tombol penutup untuk meningkatkan pengalaman pengguna. Pastikan untuk mengganti placeholder dengan informasi iklan AdSense Anda sendiri sebelum menempatkan kode ini di blog Anda.