Cara Membuat Widget Iklan Melayang Dibawah Blog Dengan Html Css

Table of Contents

Cara Membuat Iklan Melayang di Bawah Layar Blogger Mirip Iklan Anchor AdSense

Iklan melayang di bawah layar blog, widget floating ads di blogger, widget iklan anchor di blogger mirip ADSENSE,iklan melayang di bawah footer blogger.

Kalau kamu sering berselancar membaca blog atau berita lewat ponsel, pasti sudah sering melihat bentuk iklan yang satu ini: sebuah kotak iklan yang tetap berdiam menempel di bagian paling bawah layar, tidak ikut bergulir ke atas saat kamu menggeser halaman ke bawah. Bisa ditutup dengan menekan tombol silang di pojok kanannya, dan tetap terlihat sepanjang kamu berada di situs tersebut. Itulah yang banyak orang sebut sebagai iklan jangkar, iklan anchor, atau iklan floating ads — bentuk iklan yang sangat populer karena tampilannya rapi dan tidak terlalu mengganggu pembaca.

Saya sendiri pertama kali melihat tampilan iklan di bawah layar blog seperti ini beberapa tahun lalu. Awalnya saya mengira fitur ini hanya bisa dipakai kalau kita mendaftar dan menggunakan layanan resmi Google AdSense saja. Sampai suatu hari saya berpikir: bagaimana kalau saya ingin menampilkan iklan sendiri, atau iklan kerjasama langsung, dengan tampilan serupa? Apakah bisa membuat iklan di bawah footer blog mirip AdSense ini sendiri tanpa perlu bergantung sepenuhnya ke pengaturan pihak ketiga?

Itulah awal mula saya mencoba mencari dan merangkai sendiri cara membuatnya. Dan ternyata jawabannya sangat bisa — hanya dengan menggunakan kode sederhana berupa HTML dan CSS. Tidak butuh alat mahal, tidak butuh layanan berlangganan, dan yang paling penting: kita bisa mengatur tampilannya sendiri sesuai keinginan. Dalam tulisan ini, saya ingin berbagi apa yang sudah saya pelajari — mulai dari kesalahan yang pernah saya lakukan, hingga kode yang sudah terbukti berjalan stabil di berbagai templat Blogger.

Mengapa Memilih Bentuk Iklan Floating Ads Seperti Iklan Anchor?

Sebelum masuk ke cara pembuatannya, ada baiknya kita memahami dulu mengapa bentuk iklan melayang tetap di bawah layar ini begitu diminati dan efektif. Berdasarkan pengalaman saya mengelola beberapa blog dan melihat perilaku pengunjung, ada beberapa alasan utama.

Pertama, ia selalu terlihat tanpa mengganggu bacaan secara berlebihan. Berbeda dengan iklan yang muncul tiba-tiba menutupi seluruh layar atau melayang di tengah tulisan yang sedang dibaca, iklan floating ads yang menempel di bagian bawah biasanya hanya menempati ruang tepi yang tidak terlalu mengganggu alur membaca. Pengunjung tetap bisa melihatnya, tapi tidak merasa dipaksa melihatnya.

Kedua, posisinya tetap terlihat meskipun halaman digulir jauh ke bawah. Untuk iklan biasa yang diletakkan di dalam isi artikel, semakin jauh pengunjung menggulir ke bawah, semakin lama iklan itu hilang dari pandangan. Tidak demikian halnya dengan iklan anchor atau iklan jangkar. Selama pengunjung masih di halaman itu, iklan itu masih berpotensi terlihat.

Ketiga, bentuknya sudah akrab bagi pengunjung. Karena sudah terbiasa melihat iklan jangkar dari Google, pengunjung tidak bingung cara menutupnya atau menggunakannya. Tombol tutup di pojok kanan atas sudah menjadi tanda yang umum dikenal.

Keempat, fleksibel untuk berbagai keperluan. Bisa digunakan untuk menampilkan iklan jaringan periklanan, iklan kerjasama langsung, tautan ke halaman tertentu, pengumuman penting, hingga promosi produk sendiri.

Catatan: Meskipun iklan melayang di bawah layar efektif, pastikan tingginya tidak terlalu besar. Usahakan tidak menutupi lebih dari 10–15 persen tinggi layar ponsel agar pengunjung tidak merasa terganggu dan segera menutupnya.

Apa Yang Dibutuhkan Sebelum Memulai?

Hal yang menyenangkan adalah kamu tidak perlu banyak hal untuk memulainya. Yang kamu butuhkan hanyalah akses untuk mengedit templat atau menambahkan elemen HTML di Blogger. Gambar yang akan ditampilkan sebagai iklan sudah diunggah dan memiliki tautan alamatnya, serta tautan tujuan halaman yang akan dibuka saat iklan diklik. Itu saja.

Selama mencoba-coba, saya pernah mengira bahwa harus menambahkan banyak sekali kode rumit atau memasang pustaka skrip tambahan agar iklan di bawah footer blog mirip AdSense ini berfungsi. Ternyata itu tidak benar. Versi yang paling ringan dan paling stabil justru murni menggunakan kode gaya penampilan saja — tidak perlu skrip berat yang memperlambat pemuatan halaman.

Memahami Konsep Kerjanya Secara Sederhana

Sebelum melihat kodenya, mungkin berguna untuk memahami sedikit bagaimana caranya bekerja. Intinya hanya ada tiga hal utama yang membuat iklan floating ads tetap menempel di bawah layar.

Pertama, kita memberitahu peramban bahwa kotak iklan ini posisinya tetap menempel di bagian bawah layar, tidak peduli seberapa jauh halaman digulir ke atas. Itu diatur lewat properti bernama position: fixed dan bottom: 0.

Kedua, kita memastikan iklan itu tampil di atas elemen halaman lain, sehingga tidak tertutup tulisan atau gambar. Caranya lewat properti z-index dengan nilai yang cukup besar.

Ketiga, kita memberi ruang kosong di bagian bawah isi halaman agar tulisan paling bawah tidak tertutup oleh iklan itu sendiri. Ini bagian yang sering saya lupa dulu — sehingga bagian akhir tulisan tidak bisa dibaca sepenuhnya.

Langkah Demi Langkah: Membuat Iklan Melayang Sendiri

Berikut adalah urutan yang saya pakai dan sudah saya coba berulang kali. Kamu bisa mengikutinya dengan tenang.

1. Menyiapkan Kode Tampilan dan Gaya

Kita akan menggabungkan dua bagian utama: bagian gaya penampilan (CSS) dan bagian struktur tampilan (HTML). Berikut adalah kode lengkap untuk membuat iklan di bawah footer blog mirip AdSense yang sudah disesuaikan agar tidak bentrok dengan gaya templat lain.

<style>
/* IKLAN FLOATING ADS — MIRIP IKLAN ANCHOR ADSENSE */
.iklan-tetap-bawah {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding: 10px 15px;
  margin: 0;
}

.iklan-bungkus-dalam {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tombol-tutup-iklan {
  position: absolute;
  top: -8px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.tombol-tutup-iklan:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.gambar-iklan {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.gambar-iklan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.isi-iklan {
  flex: 1;
  min-width: 0;
}

.judul-iklan {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 4px;
  line-height: 1.4;
}

.deskripsi-iklan {
  font-size: 12px;
  color: #555555;
  margin: 0 0 8px;
  line-height: 1.35;
}

.baris-harga-tombol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.harga-asli {
  font-size: 12px;
  color: #999999;
  text-decoration: line-through;
}

.harga-promo {
  font-size: 15px;
  font-weight: 700;
  color: #e53935;
}

.tombol-aksi {
  background-color: #ff6a00;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.tombol-aksi:hover {
  background-color: #e55d00;
}

/* Beri ruang bawah supaya tulisan tidak tertutup iklan jangkar */
.pembungkus-isi {
  padding-bottom: 110px;
}

@media (max-width: 400px) {
  .gambar-iklan { width: 70px; height: 70px; }
  .judul-iklan { font-size: 13px; }
  .deskripsi-iklan { font-size: 11px; }
  .tombol-aksi { padding: 5px 14px; font-size: 12px; }
}
</style>

<!-- Ruang Bawah Isi -->
<div class="pembungkus-isi"></div>

<!-- IKLAN FLOATING ADS — MELAYANG DI BAWAH -->
<div class="iklan-tetap-bawah">
  <div class="iklan-bungkus-dalam">
    <button class="tombol-tutup-iklan" onclick="this.closest('.iklan-tetap-bawah').style.display='none'" aria-label="Tutup">×</button>

    <!-- Gambar Iklan Kiri -->
    <div class="gambar-iklan">
      <a href="TAHAN_LINK_TUJUAN_DISINI" target="_blank" rel="noopener noreferrer">
        <img src="TAHAN_LINK_GAMBAR_DISINI" alt="Judul Iklan" loading="lazy">
      </a>
    </div>

    <!-- Teks & Tombol Kanan -->
    <div class="isi-iklan">
      <h4 class="judul-iklan">JUDUL IKLAN ANDA DISINI</h4>
      <p class="deskripsi-iklan">Deskripsi singkat penawaran atau produk Anda.</p>
      <div class="baris-harga-tombol">
        <span class="harga-asli">Rp 99.000</span>
        <span class="harga-promo">Rp 45.000</span>
        <a href="TAHAN_LINK_TUJUAN_DISINI" target="_blank" rel="noopener noreferrer" class="tombol-aksi">BELI</a>
      </div>
    </div>
  </div>
</div>

2. Mengganti Bagian Yang Perlu Diubah

Sebelum dipasang ke blog, pastikan kamu mengganti semua bagian yang ditandai dengan latar belakang oranye di atas dengan data milikmu sendiri:

• TAHAN_LINK_TUJUAN_DISINI — Ganti dengan tautan halaman yang akan dibuka saat iklan atau tombol diklik.
• TAHAN_LINK_GAMBAR_DISINI — Ganti dengan tautan alamat gambar iklan yang sudah kamu unggah.
• JUDUL IKLAN ANDA DISINI — Ganti dengan judul produk atau penawaranmu.
• Deskripsi singkat penawaran atau produk Anda. — Ubah dengan keterangan singkat milikmu.
• Rp 99.000 dan Rp 45.000 — Sesuaikan dengan harga aslimu, atau hapus bagian ini jika tidak butuh menampilkan harga.

3. Cara Memasangnya di Blogger

Ada dua cara utama yang bisa kamu pilih — tergantung kebutuhanmu.

Cara Pertama: Dipasang di Seluruh Halaman Blog

1. Masuk ke menu Tema lalu pilih Edit HTML.
2. Cari kode penutup isi halaman yang biasanya berupa </body> di bagian paling bawah kode.
3. Tempelkan seluruh kode iklan di atas tepat sebelum baris </body>.
4. Tekan tombol Simpan Tema.

Cara Kedua: Dipasang Lewat Widget Tata Letak

1. Masuk ke menu Tata Letak.
2. Pilih Tambah Widget lalu pilih jenis HTML/JavaScript.
3. Salin dan tempel seluruh kode ke kotak isian.
4. Simpan widget, lalu taruh posisinya di bagian paling bawah susunan tata letak.
5. Tekan Simpan.

Peringatan: Jika iklan floating ads ikut bergulir ke atas saat digulir, kemungkinan ada elemen di templatmu yang memiliki aturan posisi tertentu. Memasang kode tepat sebelum </body> biasanya adalah cara yang paling aman dan stabil.

Masalah Yang Sering Muncul Dan Cara Mengatasinya

Selama mencoba dan menyesuaikan di berbagai templat, saya menemui beberapa masalah yang berulang saat membuat iklan melayang di bawah layar. Berikut solusinya.

Iklan Ikut Bergulir Ke Atas

Itu masalah yang paling sering saya temui. Penyebab utamanya biasanya adalah elemen induk di templat memiliki aturan posisi tertentu atau aturan tampilan yang mengubah perilaku posisi tetap. Cara paling ampuh mengatasinya adalah menempatkan kode iklan tepat sebelum penutup </body> — bukan di dalam kotak lain atau di dalam isi postingan. Itu biasanya langsung menyelesaikan masalah.

Bagian Bawah Tulisan Tertutup Iklan Anchor

Itu terjadi karena kita belum memberi ruang kosong yang cukup di bagian bawah isi halaman. Bagian kode .pembungkus-isi dengan aturan padding-bottom berfungsi untuk itulah. Jika masih tertutup, coba naikkan nilainya sedikit — misalnya dari 110px menjadi 120px atau 130px.

Gambar Tidak Penuh Ke Tepi Layar

Kalau gambar atau kotak iklan masih menyisakan ruang putih di pinggir, periksa apakah ada aturan jarak dalam atau jarak luar yang menempel pada elemen induk. Pastikan pada .iklan-tetap-bawah sudah tercantum padding: 10px 15px dan margin: 0. Jika ingin gambar benar-benar menempel ke tepi, atur padding: 0 dan pindahkan jarak ke bagian isi di dalamnya.

Tombol Tutup Tidak Terlihat Atau Tertutup

Itu biasanya karena nilai z-index belum cukup besar atau ada elemen lain yang menutupinya. Naikkan nilai z-index pada .iklan-tetap-bawah — misalnya menjadi 99999. Pastikan juga tombol tutup sendiri punya nilai z-index yang lebih tinggi dari isi iklan.

Menyesuaikan Tampilan Sesuai Selera

Keuntungan membuat iklan di bawah footer blog mirip AdSense sendiri adalah kamu bebas mengubah apa saja. Berikut beberapa hal yang sering saya ubah:

• Warna latar kotak iklan: cari background-color: #ffffff lalu ganti dengan kode warna yang kamu inginkan.
• Warna tombol: cari background-color: #ff6a00 pada bagian .tombol-aksi lalu ubah warnanya.
• Ukuran gambar: ubah nilai width dan height pada bagian .gambar-iklan.
• Tinggi ruang bawah: ubah nilai padding-bottom pada .pembungkus-isi.
• Lebar maksimal isi iklan: ubah nilai max-width pada .iklan-bungkus-dalam — misalnya menjadi 100% jika ingin penuh ke tepi.

Hal Yang Perlu Diperhatikan Agar Tetap Sesuai Aturan

Saat menampilkan iklan floating ads buatan sendiri, ada beberapa hal yang perlu diingat agar tidak menimbulkan masalah bagi pengunjung maupun penyedia layanan.

Pertama, pastikan iklan tidak menutupi tombol navigasi atau fitur asli peramban di layar yang berbeda. Kedua, selalu sediakan cara yang jelas untuk menutup iklan — seperti tombol silang yang sudah ada di contoh kode tadi. Ketiga, jangan berlebihan menumpuk iklan tetap sekaligus dalam satu halaman. Satu saja biasanya sudah cukup efektif tanpa membuat pengunjung merasa tidak nyaman.

Jika kamu juga menggunakan iklan dari Google AdSense di halaman yang sama, pastikan tidak melanggar kebijakan penempatan iklan mereka. Menempatkan iklan melayang di bawah layar buatan sendiri biasanya diperbolehkan, tapi tetap sebaiknya memastikan tidak menutupi atau mengganggu iklan resmi dari pihak lain.

Penutup

Siapa sangka sesuatu yang terlihat rumit dan seolah hanya bisa dibuat oleh pengembang situs besar ternyata bisa diracik sendiri hanya dengan sedikit kode sederhana? Itulah salah satu hal yang paling saya nikmati saat mengelola blog — kita bisa terus belajar, mencoba, dan menyesuaikan halaman sesuai kebutuhan kita sendiri, tidak hanya terbatas pada apa yang disediakan secara langsung di menu pengaturan.

Dengan iklan floating ads atau iklan jangkar yang tetap melayang di bawah, kamu tidak hanya membuat tampilan terlihat lebih rapi dan modern — kamu juga mendapatkan ruang tampilan yang konsisten tanpa harus bergantung sepenuhnya pada posisi di dalam isi artikel. Pengunjung tetap nyaman, dan pesan yang ingin kamu sampaikan tetap terlihat.

Tentu saja masih ada hal yang bisa dikembangkan lebih jauh. Misalnya menambahkan efek halus saat muncul dan menghilang, atau mengatur agar iklan baru muncul setelah halaman digulir sejauh tertentu. Tapi untuk versi dasar yang berfungsi baik, ringan, dan stabil — kode yang sudah dibagikan di atas sudah lebih dari cukup.

Semoga pengalaman dan panduan yang saya bagikan ini bermanfaat untukmu. Kalau nanti mencoba dan menemui kesulitan atau ingin mengembangkannya lebih lanjut, jangan ragu untuk terus mencoba dan menyesuaikan. Setiap templat memang punya sifat yang sedikit berbeda, tapi dengan sabar menyesuaikan, pasti akan menemukan cara yang pas. Selamat mencoba!