Css Media Untuk Unit Iklan Responsive Adsense

Seiring dengan berkembangnya zaman responsive web, maka iklan Adsense pun telah menyesuaikan dirinya dengan menyediakan unit iklan responsive baik untuk jenis iklan teks, gambar, ataupun teks/gambar.

Nah kemarin ada sahabat kompi yang menanyakan wacana arahan responsive Adsense yang aku pakai di blog Kompi Ajaib ini. Dan kini aku ada waktu untuk menjawabnya sekalian aku jadikan postingan biar dapat berkhasiat untuk yang lain.

Seperti kita ketahui, Adsense sendiri sudah memperlihatkan CSS media untuk unit iklan responsive, namun hanya untuk ukuran iklan dengan dimensi 728px X 90px.

Untuk menciptakan iklan responsive di Adsense ini silahkan Anda buat Unit Iklan Baru, silahkan beri nama untuk iklannya untuk memilih class pada arahan iklan juga, lalu pilih Responsive dan silahkan atur type iklannya lalu Simpan dan Ambil Kode. Pada obrolan box yang muncul, silahkan pilih Mode Lanjutan ibarat gambar di bawah ini.

Dan biasanya arahan iklannya akan ibarat di bawah ini.

 <style>
 .Adsenseresponsive { width: 320px; height: 50px; }
 @media(min-width: 500px) { .Adsenseresponsive { width: 468px; height: 60px; } }
 @media(min-width: 800px) { .Adsenseresponsive { width: 728px; height: 90px; } }
 </style>
 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <!-- testresponsive -->
 <ins class="adsbygoogle Adsenseresponsive"
      style="display:inline-block"
      data-ad-client="ca-pub-212428259xxxxxxx"
      data-ad-slot="936446xxxx"></ins>
 <script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>

Nah kini kita menambahkan CSS media-nya biar lebih sesuai dengan ukuran device mobile.

Untuk Iklan 728px X 90px

 <style scoped='scoped' type='text/css'>
 .Adsenseresponsive { width: 200px; height: 60px; }
 @media(min-width: 240px) { .Adsenseresponsive { width:200px; height: 60px; } }
 @media(min-width: 300px) { .Adsenseresponsive { width:234px; height: 60px; } }
 @media(min-width: 375px) { .Adsenseresponsive { width: 320px; height: 100px; } }
 @media(min-width: 500px) { .Adsenseresponsive { width: 468px; height: 60px; } }
 @media(min-width: 800px) { .Adsenseresponsive { width: 728px; height: 90px; } }
 </style>

Kode <style> diganti dengan <style scoped='scoped' type='text/css'> biar tidak error validasi HTML5.

Dan silahkan ganti atau sesuaikan arahan class .Adsenseresponsive dengan arahan class unit iklan yang Anda buat.

Untuk Iklan 970px X 90px

Tambahkan arahan CSS media di bawah ini pada kelompok CSS media unit iklan 728px X 90px di atas tadi

 @media(min-width: 1000px) { .Adsenseresponsive { width: 970px; height: 90px; } }

Untuk unit iklan 970px X 250px tinggal ganti angka pada height di atas dengan 250px.

Untuk Iklan 300px X 250px

 <style scoped='scoped' type='text/css'>
 .Adsenseresponsive { width: 200px; height: 200px; }
 @media(min-width: 320px) { .Adsenseresponsive { width:200px; height: 200px; } }
 @media(min-width: 350px) { .Adsenseresponsive { width: 300px; height: 250px; } }
 </style>

Untuk Iklan Tinggi 300px X 600px

 <style scoped='scoped' type='text/css'>
 .Adsenseresponsive { width: 160px; height: 600px; }
 @media(min-width: 320px) { .Adsenseresponsive { width: 300px; height: 600px; } }
 </style>

Namun khusus untuk iklan yang di simpan di dalam postingan, biar tidak error pada validasi HTML5 silahkan simpan arahan CSS media unit iklannya di atas kode ]]></b:skin> atau </style> (tanpa arahan <style scoped='scoped' type='text/css'> dan penutupnya </style>)

Dan lengkapi arahan async menjadi async='async' pada js-nya biar tidak error saat template di-save. Dan kalau kita menyimpan lebih dari satu iklan Adsense di blog, kita dapat menyimpan js-nya hanya satu saja dan simpan di atas arahan </body> (dan hapus arahan js-nya di tiap-tipa arahan iklannya) untuk sedikit mengurangi loading blog.

Sumber https://www.kompiajaib.com/

Share this post