Cara Membuat Script Iklan Responsive di Blogger

Coba Dulu Aja

Agustus 31, 2025

Ilustrasi: Cara membuat script iklan responsive di blogger

Jika kamu seorang blogger, tentu sudah tidak asing lagi dengan istilah iklan. Banyak blogger yang memasang iklan di blog mereka, entah itu dari Google Adsense, Adsterra, atau jaringan iklan lainnya. Tujuan utamanya jelas: untuk mendapatkan penghasilan tambahan dari setiap pengunjung yang mampir ke blog.

Namun, ada satu masalah yang sering dialami oleh para blogger pemula, yaitu iklan yang tidak responsive. Artinya, iklan terlihat berantakan ketika dibuka di perangkat berbeda. Misalnya, di komputer iklan terlihat rapi, tetapi saat dibuka di smartphone, iklan menjadi terlalu besar atau keluar dari area postingan.

Nah, pada artikel kali ini cobaduluaja.com akan membahas bagaimana cara membuat script iklan responsive di Blogger agar tampilan rapi di semua perangkat, baik desktop, tablet, maupun smartphone.

Kenapa Harus Membuat Iklan Responsive?

Sebelum masuk ke langkah-langkah teknis, mari pahami dulu kenapa iklan harus dibuat responsive:

1. Pengalaman Pengunjung Lebih Baik

Pengunjung yang melihat tampilan blog berantakan biasanya langsung menutup halaman. Dengan iklan responsive, tampilan blog tetap enak dilihat.

2. Meningkatkan CTR (Click Trough Rate)

Iklan yang pas dengan layar perangkat lebih mudah diklik pengunjung. Hasilnya, peluang penghasilan juga meningkat.

3. SEO Lebih Optimal

Google sangat memperhatikan pengalaman pengguna. Blog yang mobile friendly, termasuk iklannya, cenderung lebih disukai mesin pencari.

4. Mencegah Pelanggaran Kebijakan

Beberapa penyedia iklan, termasuk Google Adsense, tidak memperbolehkan iklan menutupi konten. Dengan iklan responsive, masalah ini bisa dihindari.

Cara Membuat Script Iklan Responsive di Blogger

Untuk membuat iklan responsive di Blogger, kita bisa memanfaatkan kombinasi CSS dan script iklan bawaan dari penyedia iklan. Berikut langkah-langkahnya:

1. Masuk ke dashboard Blogger

Silahkan login ke akun Blogger kamu, lalu pilih blog yang ingin dipasang iklan.

2. Siapkan script iklan

Jika kamu menggunakan Google Adsense, biasanya script iklan sudah diberikan. Contoh script standar:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="123456"
     data-ad-format="auto"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Namun, script ini kadang belum sepenuhnya responsive jika hanya ditempelkan begitu saja.

3. Tambahkan CSS responsive

Agar iklan menyesuaikan ukuran layar, kita perlu menambahkan CSS. Misalnya:

<style>
.responsive-ads {
  width: 100%;
  height: auto;
  text-align: center;
  overflow: hidden;
}
.responsive-ads ins {
  margin: auto;
}
</style>

4. Gabungkan dengan script iklan

Sekarang tempelkan script iklan di dalam div denga class responsive-ads, contohnya:

<div class="responsive-ads">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-XXXXXX"
       data-ad-slot="123456"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

5. Letakkan di tempat yang tepat

kamu bisa menaruh kode iklan responsive ini di:

Di dalam postingan (gunakan mode HTML saat menulis artikel).
Sidebar (melalui Tata Letak > Tambah Gadget > HTML/JavaScript).
Header atau Footer (juga melalui Tata Letak)

Tips Agar Iklan Lebih Efektif

Selain membuat script iklan responsive, ada beberapa tips agar penghasilan iklan kamu lebih maksimal:

1. Jangan terlalu banyak iklan

Pasang iklan secukupnya. Terlalu banyak iklan justru membuat pengunjung kabur.

2. Pilih lokasi strategis

Iklan di tengah artikel atau setelah paragraf pertama biasanya lebih efektif dibandingkan di footer.

3. Gunakan format Auto Ads (jika Adsense)

Google sudah menyediakan fitur Auto Ads, yang otomatis menempatkan iklan sesuai analisis.

4. Uji di berbagai perangkat

Setelah memasang iklan, cek blog di HP, tablet, dan laptop. Pastikan iklan tampil rapi di semua layar.

Kesimpulan

Membuat script iklan responsive di Blogger sebenarnya tidak sulit. Intinya, kita hanya perlu menambahkan sedikit CSS agar iklan bisa menyesuaikan ukuran layar. Dengan begitu, tampilan blog jadi lebih rapi, pengalaman pengunjung meningkat, dan tentu saja peluang penghasilan dari iklan juga lebih besar.

Jika kamu masih pemula, cobalah dulu memasang satu atau dua iklan responsive di blog, kemudian lihat hasilnya. Setelah terbiasa, kamu bisa mengatur strategi penempatan iklan yang lebih optimal.

Semoga artikel ini membantu kamu yang ingin serius membangun blog dengan tampilan profesional sekaligus menghasilkan.