Cara Lengkap Membuat Gambar Iklan atau Kode Script agar Terbang di Blogger

Table of contents

[Show]

Iklan atau elemen promosi yang “terbang” (floating) di blog sering digunakan untuk menarik perhatian pengunjung, baik untuk promosi produk, link afiliasi, pengumuman penting, atau ajakan follow. 

Di Blogger (Blogspot), kamu bisa menambahkan gambar iklan melayang (floating image) atau kode iklan/script dengan mudah melalui pengaturan HTML dan CSS.

Berikut ini tutorial lengkapnya “Cara Lengkap Membuat Gambar Iklan atau Kode Script agar Terbang di Blogger”:

---

✨ Jenis Floating Iklan yang Umum Digunakan:

1. Floating kiri atau kanan layar (sidebar)

2. Floating bawah layar (sticky bar)

3. Floating melayang bebas (sudut kanan bawah misalnya)

4. Floating popup tertutup otomatis/manual

---

🔧 Persiapan Gambar atau Script Iklan

• Gambar iklan: Pastikan ukuran ringan (biasanya 150px – 300px lebar).

• Link tujuan: URL halaman promosi, WhatsApp, atau landing page.

• Jika pakai script iklan (seperti Google AdSense, MGID, Adsterra): Siapkan kodenya.

---

🧩 Cara Memasang Gambar Iklan Melayang di Blogger

✅ Floating Gambar di Kanan Bawah:

1. Masuk ke Blogger > Tema > Edit HTML

2. Cari sebelum tag </body> lalu tempelkan kode berikut:

<!-- Gambar Iklan Melayang -->
<a href="https://link-promosi-anda.com" target="_blank" style="position:fixed;bottom:20px;right:20px;z-index:9999;">
  <img src="https://link-gambar-iklan-anda.com/gambar.jpg" alt="Iklan" style="width:150px;height:auto;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.3);">
</a>

💡 Ubah URL gambar dan link tujuan sesuai kebutuhanmu.

---

✅ Floating Script Iklan (Misalnya Adsterra atau HTML Box)

Jika kamu memiliki kode JavaScript atau HTML iklan (seperti AdSense, Adsterra, dll), berikut contoh memasangnya secara melayang:

<div style="position:fixed;bottom:0;left:0;width:100%;background:#fff;z-index:9999;text-align:center;box-shadow:0 -2px 8px rgba(0,0,0,0.1);">
  <!-- Masukkan kode iklan/script Anda di sini -->
  <script type="text/javascript" src="https://url-ads-provider.com/script.js"></script>
</div>

Pastikan iklan tidak melanggar kebijakan penyedia (misalnya Google AdSense sangat ketat soal penempatan).

---

✅ Floating Kiri dan Kanan (Dua sisi layar)

<!-- Floating Kiri -->
<a href="https://link-kiri.com" target="_blank" style="position:fixed;top:30%;left:10px;z-index:9999;">
  <img src="https://link-gambar-kiri.com/gambar.jpg" style="width:120px;" />
</a>

<!-- Floating Kanan -->
<a href="https://link-kanan.com" target="_blank" style="position:fixed;top:30%;right:10px;z-index:9999;">
  <img src="https://link-gambar-kanan.com/gambar.jpg" style="width:120px;" />
</a>

---

🎯 Tips Tambahan:

• Gunakan gambar berukuran kecil dan teroptimasi agar tidak memperlambat loading blog.

• Gunakan z-index:9999 untuk memastikan elemen tetap muncul di atas elemen lain.

• Hindari terlalu banyak elemen melayang agar pengunjung tidak terganggu.

• Untuk pengguna AdSense, hindari teknik floating yang melanggar pedoman.

---

🧪 Cara Menguji Apakah Floating Berjalan

1. Simpan perubahan tema.

2. Kunjungi blog kamu dalam mode publik.

3. Periksa apakah gambar atau script muncul dan bisa diklik.

4. Cek di perangkat mobile juga.

---

📌 Kesimpulan

Membuat iklan atau gambar promosi agar melayang (terbang) di Blogger sangat mudah hanya dengan HTML dan CSS dasar. Dengan menempatkan elemen di posisi strategis dan menjaga ukuran ringan, kamu bisa meningkatkan klik dan perhatian tanpa merusak pengalaman pengguna.

Berbagi :