Cara Mudah Membuat Iklan Melayang (Sticky Ads) di Bawah Blog yang Responsive

Memasang iklan di blog merupakan salah satu cara terbaik untuk mendapatkan penghasilan dari konten yang Anda buat. Salah satu jenis penempatan iklan yang paling efektif dan memiliki tingkat klik (CTR) tinggi adalah sticky ads atau iklan melayang. Iklan ini akan tetap berada di posisi bawah layar meskipun pengunjung melakukan scroll ke atas maupun ke bawah.

Iklan melayang di bawah layar sangat populer karena sifatnya yang tidak terlalu mengganggu navigasi namun tetap terlihat jelas oleh pengunjung. Tutorial ini akan membagikan kode sederhana yang bisa Anda gunakan di Blogger atau Blogspot tanpa perlu keahlian coding yang mendalam.

Kelebihan Menggunakan Sticky Ads

Penggunaan iklan melayang memiliki beberapa manfaat utama bagi pemilik blog. Pertama, visibilitas iklan menjadi jauh lebih tinggi karena posisi iklan yang statis. Kedua, iklan ini biasanya sangat responsive, artinya tampilannya akan menyesuaikan secara otomatis baik saat dibuka melalui perangkat desktop maupun smartphone.

Selain itu, fitur tombol tutup (close button) sangat penting untuk memberikan kenyamanan bagi pengunjung. Jika mereka merasa terganggu, mereka bisa menutup iklan tersebut dengan sekali klik. Hal ini menjaga kualitas user experience blog Anda tetap baik di mata pengunjung maupun mesin pencari seperti Google.

Persiapan Kode HTML dan CSS

Langkah pertama yang harus Anda lakukan adalah menyiapkan kode yang terdiri dari elemen HTML untuk struktur iklan, CSS untuk mengatur posisi, dan sedikit JavaScript agar tombol tutup berfungsi dengan normal. Anda dapat menyalin kode di bawah ini secara utuh.

<style>
/* Mengatur posisi dan tampilan iklan melayang */
.sticky-ads {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 90px;
    padding: 5px 0;
    box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    z-index: 999;
}

/* Tombol penutup iklan */
.sticky-ads-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0;
    position: absolute;
    right: 0;
    top: -30px;
    background-color: #fff;
    box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .08);
    cursor: pointer;
    color: #333;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 18px;
}
</style>

<div class='sticky-ads' id='sticky-ads'>
    <div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'>&times;</div>
    <div class='sticky-ads-content'>
        
        <!-- Ganti teks ini dengan kode unit iklan Anda (AdSense/Lainnya) -->
        <img src="https://via.placeholder.com/728x90.png?text=Pasang+Iklan+Disini" alt="Banner Iklan" style="max-width:100%;height:auto;" />
        
    </div>
</div>

Cara Memasang di Blogger

Untuk menerapkan kode tersebut ke dalam blog Anda, silakan ikuti panduan sederhana berikut ini agar tidak terjadi kesalahan pada template blog Anda.

Pertama, masuk ke dashboard Blogger Anda. Pilih menu Tata Letak atau Layout pada bilah navigasi sebelah kiri. Carilah bagian yang bernama Tambahkan Gadget atau Add a Gadget, biasanya posisi paling bawah atau di bagian sidebar akan bekerja dengan baik karena kode ini bersifat floating (melayang).

Kedua, pilih opsi HTML/JavaScript dari daftar gadget yang tersedia. Kosongkan bagian Judul dan tempelkan (paste) seluruh kode yang telah Anda salin di atas ke dalam kolom Konten. Pastikan Anda mengganti bagian placeholder gambar atau teks di dalam kode tersebut dengan kode unit iklan asli milik Anda, misalnya kode dari Google AdSense.

Ketiga, klik tombol Simpan. Sekarang buka blog Anda dan lakukan scroll. Anda akan melihat sebuah banner melayang muncul di bagian bawah layar. Anda juga bisa mencoba mengklik tanda silang atau tombol tutup untuk memastikan fitur tersebut berfungsi untuk menyembunyikan iklan.

Tips Agar Iklan Tidak Melanggar Kebijakan

Meskipun iklan melayang sangat menguntungkan, Anda harus tetap berhati-hati agar tidak melanggar kebijakan penyedia iklan seperti AdSense. Pastikan iklan Anda memiliki tombol tutup yang jelas agar pengunjung tidak merasa terjebak. Jangan membuat ukuran banner terlalu besar yang menutupi lebih dari sepertiga konten utama pada layar smartphone.

Pastikan juga posisi iklan tidak menutupi menu navigasi penting atau tombol interaksi lainnya di blog Anda. Dengan pengaturan yang tepat, sticky ads akan menjadi sumber pendapatan yang konsisten tanpa merusak reputasi blog Anda di mata pengunjung.