Cara mudah seting ukuran iklan Adsense Menjadi Besar Sesuai Layar dan responsive ke Smartphone

Postingan ini menjawab rasa penasaran saya tentang bagaimana mengatur ukuran iklan adsense agar sesuai layar, baik untuk tampilan dekstop maupun seluler (termasuk gadget / smartphone ). dengan kata lain kita akan modifikasi iklan adsense agar lebih 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 Responsive
• Pengujian A/B
• Menetapkan Saluran khusus Secara Dinamis
• Minimisasi Tag Iklan

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

Baca Juga : Cara Memasang script kode iklan Responsive Adsense Rectangle

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 90 px dilayar dekstop, maka akan tampil terpotong diperangkat mobile atau seluler.

Intinya, iklan ukuran iklan adsense akan dibuat responsive sesuai layar penggunaan. dan akan tampil sesuai layar dengan kondisi tertentu seperti di bawah ini :

• Jika layar maksimal 450px , maka ukuran iklan menjadi 300 x 250 px.
• Jika layar minimal 500px, maka ukuran iklan menjadi 336 x280px
• 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

Di bawah ini adalah script standar unit iklan responsive dari google adsense

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– MUBAROCK – 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 script di atas.

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 ukuran 600p X 280px bisa sesuaikan dengan lebar area postingan 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

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

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 <stylescoped='scoped'type='teks/css'>

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

Cek Tampilan iklan di Seluler 

Setelah itu kita bisa dapat melihat 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 postingan. jadi seolah iklan memenuhi area posting dan berubah menjadi besar.

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

Selamat Mencoba Semoga Sukses Selalu buat sobat blogger Aminn ya Robal al'amin.

Share this post