Artikel Adsense

Modifikasi Ukuran Iklan Adsense Menjadi Besar Sesuai Layar Dan Responsive

Posting ini menjawab rasa penasaran saya tentang bagaimana mengatur ukuran iklan adsense agar sesuai layar, baik untuk tampilan dekstop maupun seluler (termasuk gadget dan ponsel cerdas). Dengan kata lain kita akan modifikasi iklan adsense agar bisa tampil sesuai dengan yang kita inginkan.

Sebelum berlanjut, apakah boleh kita melakukan modifikasi iklan dari google adsense? Kita simak sebentar uraian di bawah ini, agar tidak terjadi kesalahan dalam mengubah ukuran iklan adsense. Terutama sesuai dengan pedoman Modifikasi kode iklan AdSense.

Ini adalah beberapa modifikasi kode iklan Adsense yang dapat diterima atau diperbolehkan oleh pihak Google Adsense :

  • Desain Responsif
  • Pengujian A/B
  • Menetapkan Saluran Khusus Secara Dinamis
  • Minimisasi Tag Iklan

Dan ini menyangkut unit iklan responsive dan minimasi tag iklan dengan modifikasi dengan media CSS.

Penambahan CSS Media agar ukuran iklan adsense sesuai layar

Meskipun pihak Google Adsense sudah memberikan CSS media untuk unit iklan responsive, namun hanya untuk ukuran iklan dengan dimensi 728px X 90px saja. Dan ketika menampilkan ukuran 620 X 90px dilayar dekstop, maka akan tampil terpotong di perangkat mobile atau seluler.

Intinya, iklan ukuran iklan adsense akan dibuat responsive sesuai dengan layar pengguna. Dan akan tampil sesuai layar dengan kondisi tertentu seperti dibawah ini.

  • Jika layar maksimal 450px, maka ukuran iklan menjadi 300 x 250px.
  • Jika layar minimal 500px, maka ukuran iklan menjadi 336 x 280px.
  • Jika layar minimal 800px, maka ukuran iklan menjadi 620 x 90px
  • Dan ukuran iklan lain akan menjadi 336 x 280px.

Dan yang paling istimewa, jika anda menempatkan ukuran iklan adsense responsive, maka hasilnya akan tampak memenuhi ruang posting (menjadi besar). Artinya iklan akan mengikuti layar sesuai area posting. Seperti contoh dibawah ini.

Loading...
ukuran iklan adsense
Iklan tampil penuh pada layar

Dibawah ini adalah script standar unit iklan responsive dari google adsense.

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– klik mania – responsive artikel –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXX
data-ad-slot=”XXXX
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Yang kita butuhkan adalah kode ca-pub dan ad-slot XXXX pada sript diatas.

Dan dibawah ini adalah CSS Media yang akan kita terapkan

<style scoped=’scoped’ type=’text/css’>
.iklan_responsive { width: 336px; height: 280px; }
@media (max-width:450px) { .iklan_responsive { width: 300px; height: 250px; } }
@media (min-width:500px) { .iklan_responsive { width: 336px; height: 280px; } }
@media (min-width:800px) { .iklan_responsive { width: 600px; height: 280px; } }
</style>

<ins class=”adsbygoogle iklan_responsive”
style=”display:inline-block;”
data-ad-client=”ca-pub-XXXX
data-ad-slot=”XXXX“</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

Keterangan :

  • Untuk warna biru, bisa sesuaikan dengan lebar area posting pada blog anda. Tapi untuk ukuran standar, bisa menggunakan ukuran tersebut.
  • Ganti kode XXXX dengan  kode ca-pub dan ad-slot milik anda.

Setelah selesai, copy semua kode CSS tersebut kedalam widget atau bisa tempatkan iklan adsense di dalam postingan dengan plugin quick adsense.

Baca : Cara menggunakan plugin quick adsense

Tambahan : Cara ini juga berlaku untuk iklan adsense dengan ukuran custom size dan menjadikan ukuran custom size responsive tampil di dekstop maupun mobile.

Jika menggunakan blogger/blogspot

Parse dahulu kode script di atas Di sini

Khusus untuk iklan yang di simpan di dalam postingan, agar tidak error pada validasi HTML5 silahkan simpan kode CSS media unit iklannya di atas kode ]]></b:skin>atau </style>

Hilangkan kode <style scoped=’scoped’ type=’text/css’>

Dan tanpa menggunakan penutup </style> (jangan di pakai)

Cek tampilan iklan di seluler

Setelah itu kita dapat lihat hasilnya langsung untuk tampilan seluler, ada baiknya uji langsung menggunakan perangkat seluler milik anda. Apakah tampilan iklan sudah menyesuaikan.

Jika berhasil diterapkan dalam blog anda, ukuran iklan adsense akan menyesuaikan pada tinggi dan lebar layar area posting. Jadi seolah iklan memenuhi area posting dan berubah menjadi besar.

Dan jika pengunjung melakukan refresh pada halaman atau berpindah ke halaman posting lain, maka iklan adsense seolah olah berganti ukuran, tetapi sebenarnya hanya menyesuaikan ketersediaan iklan pada saat itu.

Selamat mencoba, jika terdapat masalah bisa urun rembuk di kotak komentar.



Loading...

Baca selengkapnya

ganisebastian

Menulis dari berbagai pengalaman pribadi dan bisa dipertanggung jawabkan, jika bermanfaat bagi Anda silahkan share.

Artikel terkait

75 Comments

  1. Awalnya saya coba gagal, ternyata kurang masukin kode setelah adsbygoogle. Dan sekarang sudah bisa gan, terimakasih banyak pokoknya. Sukses terus buat klikmania

    1. Normal ukuran iklan untuk header di template blog Anda adalah 728 x 90. Karena bidang template terlalu sempit, maka bisa gunakan kode CSS dan rubah ukuran ke 700 x 90. Alternatif kedua adalah mengubah lebar kolom template sesuai ukuran header.

  2. makasih gan tips nya, yuk ramein juga jalanucul.blogspot.com

    atau bs juga dengan ketik jalanucul di google search engine

  3. Sip! Terimakasih banyak. Sempet bingung waktu mau masang di blogspot soalnya kode dengan tanda ” harus di ganti dengan ” juga kurang kode >.

    Oh iya, saya lihat di kebijakan google adsense yang sekarang, jumlah memasang iklan adsense kan sudah tidak lagi dibatas (termasuk ukuran juga), Nah.. kalau ukuran iklan yang disetting manual ini kira2 aman gak yah? soalnya saya pasang di awal dan akhir artikel dengan ukuran yang sama.

    Terimakasih banyak min 🙂

  4. Mau coba ukuran iklan yang pas dan cocok untuk bisa lebih menyatu dalam setiap postingan
    Makasih mas infonya, mau coba terapin dulu

  5. Mas mau tanya kalau unit 728×90 boleh g mas? Takut ngelanggar kebijakan google diang mas
    Terima kasih

  6. saya lihat iklan di blog ini yang bgian headernya gk responsive mas

  7. hallo mas,, slm kenal , saya mau tanya, iklan saya kadang kadang tampil , kadang juga nggak tampil ,, apakah itu pengaruh dari apa?

    1. Selama kode iklan tidak dirubah, tidak masalah mas. Yang kita gunakan adalah kode CSS.
      Lagipula Adsense juga menyediakan fitur custom size di dashboard Adsense, jadi untuk ukuran iklan bisa dirubah.

  8. Untuk iklan selain Adsense apa bisa ma, semisal Adnow / Payclick, caranya gimana mas?

  9. saya coba pasang di banner blogspot kok nggak bisa ya mas

  10. gan saya mau pasang..
    tapi kalo untuk web toko online bagus gak ya…
    rencananya mau di pasang di toko online.. di landingkan ke toko online lainnya gitu..

    Thx

  11. Mantab om sukses di saya lancar jaya. Header 728×90 saya matikan kalo untuk dibuka dari hp jadi tak terlihat ada iklan. tapi kalo dari komputer terlihat ada iklan di header. mantap ni tutor nya. Makasih banyak om.