Cara Menambahkan Flowing Ads (Iklan Mengembang) di Blogger dengan Mudah

Menambahkan flowing ads atau iklan mengembang di Blogger adalah cara efektif untuk meningkatkan pendapatan dari blog tanpa mengganggu pengalaman pengguna. Iklan ini bisa muncul di bagian kanan, kiri, dan bawah halaman, serta tetap terlihat saat pengunjung menggulir halaman. Berikut adalah panduan langkah demi langkah untuk menambahkan iklan mengembang di Blogger.

1. Cara Menambahkan Iklan Mengembang di Kanan dan Kiri

Iklan di sisi kanan dan kiri halaman akan tetap terlihat saat pengguna menggulir halaman. Berikut cara menambahkannya:

Langkah-langkah:

1.     Masuk ke Blogger dan pilih blog yang ingin ditambahkan iklan.

2.     Masuk ke Tata Letak (Layout).

3.     Klik Tambahkan Gadget (Add a Gadget) pada area yang diinginkan.

4.     Pilih HTML/JavaScript.

5.     Salin dan tempel kode berikut ke dalam kotak Konten:

<div class="floating-ad left-ad">
    <!-- Tempel iklan di sini! -->
</div>

<div class="floating-ad right-ad">
    <!-- Tempel iklan di sini! -->
</div>

<style>
    .floating-ad {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 160px;
        height: 600px;
        z-index: 9999;
    }
    .left-ad { left: 10px; }
    .right-ad { right: 10px; }
    
    @media (max-width: 1024px) {
        .floating-ad { display: none; }
    }
</style>

6.     Cara menempelkan kode iklan:

o    Gantilah teks <!-- Tempel iklan di sini! --> dengan kode iklan dari penyedia iklan yang kamu gunakan (misalnya Google AdSense, MGID, Adsterra, atau lainnya).

o    Pastikan menyalin kode iklan yang sudah disediakan, lalu tempel di tempat yang sesuai pada kode di atas.

7.     Klik Simpan (Save).

8.     Lihat perubahan di blog kamu untuk memastikan iklan tampil di kanan dan kiri.

2. Cara Menambahkan Iklan Mengembang di Bawah

Iklan ini akan muncul di bagian bawah halaman dan tetap terlihat saat pengguna menggulir.

Langkah-langkah:

1.     Masuk ke Blogger dan buka Tata Letak.

2.     Klik Tambahkan Gadget di area footer atau bagian bawah halaman.

3.     Pilih HTML/JavaScript.

4.     Salin dan tempel kode berikut ke dalam kotak Konten:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function() {
    $('img#closed').click(function(){
        $('#btm_banner').hide(90);
    });
});
</script>

<style type='text/css'>
div#btm_banner {
    bottom: 0;
    position: fixed;
    width: 100%;
    opacity: 0.9;
    left: 0;
    z-index: 9999;
}
div#btm_banner img {
    border:0;
    cursor:pointer;
}
</style>

<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 120px;'>
    <div style='text-align: right; width: 728px; height: 15px;'>
        <img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKcM-JKwsGb6rzacexzzz9KLURvSHCTF0oLnx7sJ2DHTbcj9f63SfHUEdLzzcdTmDDEOboYh1QqqdHbMcgYuKT34Lu1i6Orzwdu7rP-FPLV4catvUd2BIffgKuPvvrW7uMcZvnwpBPt_u/s1600/close3.png'/>
    </div>

    <div style='clear: both;'></div>
    <p><center>
        <!-- Tempel iklan di sini! -->
    </center></p>
</div>

5.     Cara menempelkan kode iklan:

o    Gantilah teks <!-- Tempel iklan di sini! --> dengan kode iklan dari penyedia iklan kamu.

o    Salin kode iklan yang sudah disediakan oleh platform iklan dan tempelkan di dalam tag <center> agar iklan bisa muncul di bagian bawah halaman.

6.     Klik Simpan.

7.     Lihat blog kamu untuk memastikan iklan muncul di bagian bawah halaman.

Penyesuaian dan Catatan Penting

• Iklan akan menghilang di perangkat dengan layar kecil (di bawah 1024px, seperti HP dan tablet) untuk menghindari gangguan bagi pengguna mobile.
• Pastikan kode iklan yang digunakan valid agar tidak terjadi error dalam tampilan.
• Jangan menempatkan terlalu banyak iklan karena dapat memperlambat loading halaman blog.
• Pastikan blog kamu mematuhi kebijakan Google AdSense atau jaringan iklan lainnya agar tidak melanggar aturan monetisasi.

Dengan mengikuti langkah-langkah di atas, kamu dapat dengan mudah menambahkan flowing ads di Blogger untuk meningkatkan potensi pendapatan tanpa mengganggu pengalaman pengunjung. Jangan lupa mengganti placeholder "Tempel iklan di sini!" dengan kode iklan asli dari penyedia iklan yang kamu gunakan.

Selamat mencoba! 🚀

Berbagi :