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

Q: Apakah sticky ads bisa responsive di smartphone?

Bisa. Dengan menggunakan CSS seperti max-width: 100% dan media query, ukuran container serta konten iklan dapat disesuaikan dengan layar perangkat.

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

Iklan melayang atau sticky ads di Blogger adalah jenis penempatan iklan yang tetap berada pada posisi tertentu ketika pengunjung melakukan scrolling. Salah satu posisi yang sering digunakan adalah bagian bawah layar karena area tersebut dapat membuat banner tetap terlihat tanpa harus mengikuti posisi konten artikel.

Bagi pemilik blog yang menggunakan iklan sebagai salah satu sumber monetisasi, penempatan iklan merupakan bagian yang perlu diperhatikan. Iklan yang terlalu mengganggu dapat membuat pengalaman pengguna menjadi kurang nyaman, sedangkan iklan yang tidak mudah terlihat mungkin memiliki visibilitas yang lebih rendah.

Salah satu solusinya adalah menggunakan sticky ads di bagian bawah halaman Blogger dengan desain responsive dan tombol tutup. Pada tutorial ini, kita akan membuat banner iklan melayang menggunakan HTML, CSS, dan sedikit JavaScript yang hanya digunakan untuk fungsi tombol close.

Apa Itu Sticky Ads di Blogger?

Sticky ads adalah elemen iklan yang menggunakan posisi tetap sehingga tetap berada di area layar tertentu ketika pengunjung menggulir halaman. Dalam tutorial ini, banner ditempatkan di bagian bawah layar menggunakan CSS position: fixed.

Ketika dibuka melalui desktop, banner akan berada di bagian bawah layar dengan lebar mengikuti area browser. Pada perangkat mobile, ukuran konten iklan dapat menyesuaikan lebar layar melalui pengaturan max-width: 100%.

Kelebihan Menggunakan Iklan Melayang

Jika digunakan secara proporsional, sticky ads dapat menjadi alternatif penempatan iklan yang praktis. Beberapa kelebihannya antara lain:

Visibilitas iklan lebih konsisten karena banner tetap berada pada area layar tertentu.
Dapat digunakan pada desktop dan mobile dengan CSS responsive.
Mudah ditutup menggunakan tombol close yang disediakan.
Tidak membutuhkan plugin Blogger tambahan untuk membuat container iklannya.
Tampilan dapat disesuaikan dengan desain template blog.
Mudah ditempatkan melalui gadget HTML/JavaScript Blogger.

Kode Sticky Ads Responsive untuk Blogger

Sebelum memasangnya, siapkan kode HTML dan CSS berikut. Kode ini menggunakan container fixed untuk membuat banner berada di bagian bawah layar serta tombol tutup untuk menyembunyikannya.

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

/* Tombol Close */
.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 rgba(9, 32, 76, .08);
  cursor: pointer;
  color: #333;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 18px;
}

/* Area Konten Iklan */
.sticky-ads-content {
  width: 100%;
  max-width: 728px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-ads-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Penyesuaian Smartphone */
@media screen and (max-width: 768px) {
  .sticky-ads {
    min-height: 50px;
    max-height: 100px;
    padding: 5px;
  }

  .sticky-ads-content {
    max-width: 100%;
  }
}
</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 bagian ini dengan kode unit iklan Anda -->
    <img
      src='https://via.placeholder.com/728x90.png?text=Pasang+Iklan+Disini'
      alt='Banner Iklan'
    />

  </div>

</div>

Penjelasan Kode Sticky Ads

Kode tersebut terdiri dari beberapa bagian yang memiliki fungsi berbeda. Memahami fungsi setiap bagian akan memudahkan Anda melakukan modifikasi jika ingin menyesuaikan ukuran atau desain iklan.

1. Position Fixed

position: fixed;
bottom: 0;
left: 0;

Properti tersebut membuat container iklan berada pada posisi tetap di bagian bawah viewport. Ketika pengunjung melakukan scrolling, container tetap berada di posisi tersebut.

2. Lebar Container

width: 100%;

Pengaturan tersebut membuat area sticky ads menggunakan lebar layar yang tersedia. Konten iklan kemudian dibatasi dengan max-width agar banner tidak melebar secara berlebihan.

3. Tombol Close

Elemen dengan class sticky-ads-close digunakan sebagai tombol untuk menutup iklan. Ketika tombol diklik, JavaScript akan mengubah properti display container menjadi none.

4. Z-Index

z-index: 999;

Nilai tersebut digunakan agar sticky ads berada di atas sebagian elemen halaman lainnya. Jika template memiliki elemen fixed dengan z-index lebih tinggi, Anda mungkin perlu menyesuaikan nilainya.

Cara Memasang Sticky Ads di Blogger

Setelah kode siap, Anda dapat memasangnya melalui fitur Layout atau Tata Letak di Blogger. Metode ini cocok jika Anda ingin menambahkan kode tanpa mengedit struktur utama template.

Langkah 1: Masuk ke Dashboard Blogger

Buka dashboard Blogger dan pilih blog yang ingin Anda tambahkan sticky ads. Setelah itu, pilih menu Tata Letak atau Layout.

Langkah 2: Tambahkan Gadget HTML/JavaScript

Cari area layout yang memungkinkan Anda menambahkan gadget. Klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.

Kosongkan bagian judul jika tidak diperlukan. Selanjutnya, tempelkan kode sticky ads yang telah disiapkan ke dalam kolom konten.

Langkah 3: Ganti Placeholder dengan Iklan Anda

Pada contoh kode terdapat gambar placeholder berikut:

<img
  src='https://via.placeholder.com/728x90.png?text=Pasang+Iklan+Disini'
  alt='Banner Iklan'
/>

Bagian tersebut hanya digunakan sebagai contoh tampilan. Jika Anda menggunakan layanan iklan tertentu, ganti placeholder tersebut dengan implementasi unit iklan yang sesuai dengan platform dan kebijakan penyedia iklan yang Anda gunakan.

Langkah 4: Simpan Gadget

Setelah kode selesai ditempelkan dan disesuaikan, klik Simpan. Kemudian buka blog Anda pada tab baru untuk melihat hasilnya.

Lakukan scrolling pada halaman untuk memastikan banner tetap berada di bagian bawah layar. Selanjutnya klik tombol × untuk memastikan fungsi penutupan iklan berjalan dengan baik.

Cara Membuat Sticky Ads Tetap Responsive

Salah satu hal penting dalam membuat iklan melayang di Blogger adalah memastikan banner tidak terlalu lebar ketika dibuka melalui smartphone. Kode di atas menggunakan max-width: 100% agar konten gambar tidak melebihi lebar container.

Untuk perangkat mobile, Anda juga dapat mengatur ulang tinggi container menggunakan media query:

@media screen and (max-width: 768px) {
  .sticky-ads {
    min-height: 50px;
    max-height: 100px;
    padding: 5px;
  }

  .sticky-ads-content {
    max-width: 100%;
  }
}

Pengaturan tersebut membantu membuat area iklan lebih fleksibel pada layar dengan ukuran yang lebih kecil.

Pentingnya Tombol Close pada Sticky Ads

Tombol tutup merupakan bagian penting dari desain sticky ads. Pengunjung harus memiliki cara yang mudah untuk menyembunyikan iklan apabila iklan tersebut menutupi bagian halaman yang ingin mereka baca.

Tombol close sebaiknya memiliki ukuran yang cukup untuk disentuh pada perangkat mobile dan ditempatkan pada posisi yang mudah ditemukan. Hindari membuat tombol terlalu kecil atau sulit diklik.

Tips Menggunakan Sticky Ads di Blogger

Sticky ads sebaiknya digunakan dengan memperhatikan kenyamanan pengunjung. Penempatan iklan yang terlalu besar atau menutupi bagian penting halaman dapat mengganggu navigasi dan membaca artikel.

Gunakan ukuran iklan yang proporsional dengan ukuran layar.
Sediakan tombol close yang jelas dan mudah digunakan.
Jangan sampai iklan menutupi menu navigasi atau tombol penting.
Periksa tampilan sticky ads pada smartphone dan desktop.
Hindari terlalu banyak elemen fixed pada halaman yang sama.
Pastikan kode iklan berasal dari sumber yang terpercaya.
Perhatikan kebijakan platform atau jaringan iklan yang digunakan.

Apakah Sticky Ads Bisa Meningkatkan Pendapatan Blog?

Sticky ads dapat meningkatkan visibilitas sebuah unit iklan karena iklan tetap berada di area layar ketika pengunjung melakukan scrolling. Namun, tidak ada jaminan bahwa penggunaan sticky ads otomatis meningkatkan CTR atau pendapatan.

Hasil monetisasi dapat dipengaruhi oleh banyak faktor, seperti jumlah pengunjung, jenis konten, perangkat yang digunakan, lokasi audiens, jenis iklan, kualitas traffic, dan konfigurasi unit iklan.

Karena itu, sebaiknya lakukan pengujian secara bertahap dan perhatikan apakah penempatan iklan tetap memberikan pengalaman pengguna yang baik.

Perhatikan Kebijakan Penyedia Iklan

Sebelum menggunakan sticky ads untuk menampilkan iklan, pastikan format dan penempatannya sesuai dengan kebijakan penyedia iklan yang Anda gunakan. Setiap jaringan iklan dapat memiliki aturan berbeda mengenai ukuran, posisi, interaksi, dan cara menampilkan iklan.

Jangan menggunakan desain yang membuat pengunjung sulit menutup iklan atau secara tidak sengaja mengklik iklan. Hindari pula menempatkan banner pada posisi yang menghalangi konten utama atau fungsi navigasi penting.

Jika Anda menggunakan Google AdSense atau layanan iklan lainnya, selalu periksa dokumentasi dan kebijakan terbaru dari penyedia tersebut sebelum menerapkan format iklan tertentu.

Masalah yang Sering Terjadi pada Sticky Ads Blogger

Iklan Menutupi Konten

Jika banner terlalu tinggi, sebagian konten di bagian bawah halaman dapat tertutup. Solusinya adalah mengurangi tinggi container atau menyesuaikan ukuran materi iklan.

Tombol Close Tidak Berfungsi

Pastikan ID container dan kode JavaScript pada atribut onclick sesuai. Contoh kode menggunakan ID:

id='sticky-ads'

Kemudian JavaScript memanggil ID tersebut untuk menyembunyikan container ketika tombol diklik.

Sticky Ads Bertabrakan dengan Elemen Template

Beberapa template Blogger memiliki elemen seperti floating menu, bottom navigation, atau popup yang juga menggunakan position: fixed. Jika terjadi tumpang tindih, sesuaikan z-index dan posisi elemen agar tidak saling menutupi.

Kesimpulan

Cara membuat iklan melayang atau sticky ads di Blogger dapat dilakukan dengan HTML, CSS, dan sedikit JavaScript untuk fungsi tombol tutup. Dengan menggunakan position: fixed, banner dapat ditempatkan secara tetap di bagian bawah layar ketika pengunjung melakukan scrolling.

Agar lebih nyaman digunakan, desain sticky ads sebaiknya dibuat responsive, memiliki tombol close yang mudah ditemukan, dan tidak menutupi bagian penting dari halaman. Anda juga perlu memperhatikan aturan dari jaringan iklan yang digunakan sebelum menerapkan kode pada blog.

Dengan penempatan yang tepat, sticky ads dapat menjadi salah satu pilihan format monetisasi Blogger tanpa harus mengorbankan kemudahan navigasi dan kenyamanan pengunjung.

FAQ Sticky Ads Blogger

1. Apa itu sticky ads di Blogger?

Sticky ads adalah iklan yang menggunakan posisi tetap sehingga tetap berada di area tertentu pada layar ketika pengunjung melakukan scrolling. Dalam tutorial ini, iklan ditempatkan di bagian bawah layar.

2. Apakah sticky ads bisa dipasang di Blogger?

Bisa. Sticky ads dapat dibuat menggunakan HTML dan CSS, sedangkan JavaScript sederhana dapat digunakan untuk memberikan fungsi tombol tutup.

3. Apakah sticky ads bisa responsive di smartphone?

Bisa. Dengan menggunakan CSS seperti max-width: 100% dan media query, ukuran container serta konten iklan dapat disesuaikan dengan layar perangkat.

4. Apakah tombol close wajib digunakan?

Tombol close sangat disarankan untuk memberikan kontrol kepada pengunjung ketika iklan melayang mengganggu tampilan atau menutupi bagian halaman yang ingin mereka akses.

5. Apakah sticky ads otomatis meningkatkan penghasilan blog?

Tidak ada jaminan. Sticky ads dapat meningkatkan visibilitas iklan, tetapi pendapatan dan CTR dipengaruhi oleh berbagai faktor seperti traffic, jenis iklan, audiens, perangkat, dan konfigurasi monetisasi.

6. Apakah sticky ads aman digunakan dengan Google AdSense?

Penggunaan sticky ads harus mengikuti kebijakan Google AdSense dan aturan penempatan iklan yang berlaku. Pastikan format dan posisi iklan tidak mengganggu navigasi, konten, atau interaksi pengguna.

7. Di mana kode sticky ads dipasang di Blogger?

Kode dapat ditempatkan melalui gadget HTML/JavaScript pada menu Tata Letak Blogger. Pastikan implementasinya sesuai dengan struktur template dan kebijakan layanan iklan yang digunakan.

Menu Navigasi