Ditulis oleh: Ditulis pada: 9/14/2019
Modifikasi Iklan Responsive Adsense Dengan Media Query - Ada beberapa Blogger yang masih bingung untuk memodifikasi unit iklan Adsense karena khawatir melanggar kebijakan Adsense. Sehingga mereka tidak bisa menyesuaikan iklan Adsense dengan ukuran yang diinginkan.
Untuk itu, kali ini saya akan menunjukan cara memodifikasi ukuran iklan Adsense yang dapat diterima dan tidak akan melanggar kebijakan Program AdSense dengan memodifikasi kode iklan responsif dengan cara yang disetujui ini.
Kita bisa memodifikasi iklan responsif Adsense dengan menggunakan CSS media query untuk menentukan ukuran tertentu pada lebar layar tertentu agar iklan yang tampil lebih optimal.
Menentukan Ukuran Unit Iklan per Lebar Layar
Berikut saya contohkan untuk menunjukkan kepada Anda cara mengubah kode responsif iklan Adsense Anda untuk menetapkan ukuran unit iklan yang lebih spesifik untuk tiga jenis lebar layar, yaitu, seluler, tablet, dan desktop.
Anda setidaknya memiliki sedikit pengalaman tentang penggunana kueri media CSS agar ketika memodifikasi kode iklan AdSense untuk mengikuti contoh ini bisa sesuai dengan yang diharapkan dan tidak menyebabkan error pada tema Anda.
Berikut adalah beberapa contoh kode iklan responsif yang dimodifikasi dengan menetapkan ukuran unit iklan yang tepat untuk per lebar layar:
Iklan Horizontal
- Untuk lebar layar hingga 500px: menggunakan unit iklan 320x100.
- Untuk lebar layar antara 500px dan 799px: menggunakan unit iklan 468x60.
- Untuk lebar layar 800px dan lebih lebar: menggunakan unit iklan 728x90.
Untuk Non AMP
Tambahkan CSS berikut di style blog Anda.
.iklan_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }Kemudian tambahkan class iklan_responsive_1 pada kode iklan seperti berikut ini. Anda bisa menempatkan kode iklan yang sama di beberapa tempat sesuai desain blog Anda.
<ins class="adsbygoogle iklan_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Kemudian silahkan simpan kode JS Adsense berikut ini di atas kode </body>. Perlu diketahui bahwa kita cukup menggunakan 1 buah JS Adsense pada blog agar tidak terlalu mengganggu loading blog. Atau Anda juga bisa menggunakan lazyload Adsense agar tidak mengganggu loading blog.
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Untuk AMP HTML
Untuk AMP HTML, kita bisa menggunakan media query pada HTML. Untuk iklan ini bisa menggunakan kode seperti berikut ini.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='100' media='(max-width: 499px)' type='adsense' width='320'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='60' media='(max-width: 799px) and (min-width:500px)' type='adsense' width='468'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' media='(min-width: 800px)' type='adsense' width='728'>
</amp-ad>Gunakan data-ad-client dan data-ad-slot yang sama pada ketiga kode amp-ad tersebut dan simpan ketiga kode tersebut dalam satu slot iklan yang sama di blog Anda. Dan Anda bisa menggunakannya pada beberapa slot sesuai dengan desain tema Anda.
Iklan Persegi
- Untuk lebar layar hingga 500px: menggunakan unit iklan 100vw x 320.
- Untuk lebar layar antara 500px dan 799px: menggunakan unit iklan 300x250.
- Untuk lebar layar 800px dan lebih lebar: menggunakan unit iklan 336x280.
Untuk Non AMP
Tambahkan CSS berikut di style blog Anda.
.iklan_responsive_2 { width: 100vw; height: 320px; }
@media(min-width: 500px) { .example_responsive_2 { width: 300px; height: 250px; } }
@media(min-width: 800px) { .example_responsive_2 { width: 336px; height: 280px; } }Kemudian tambahkan class iklan_responsive_2 pada kode iklan seperti berikut ini. Anda bisa menempatkan kode iklan yang sama di beberapa tempat sesuai desain blog Anda.
<ins class="adsbygoogle iklan_responsive_2"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Kemudian silahkan simpan kode JS Adsense berikut ini di atas kode </body>. Perlu diketahui bahwa kita cukup menggunakan 1 buah JS Adsense pada blog agar tidak terlalu mengganggu loading blog. Atau Anda juga bisa menggunakan lazyload Adsenseagar tidak mengganggu loading blog.
<script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Untuk AMP HTML
Untuk AMP HTML, kita bisa menggunakan media query pada HTML. Untuk iklan ini bisa menggunakan kode seperti berikut ini.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 499px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='250' media='(max-width: 799px) and (min-width:500px)' type='adsense' width='300'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='280' media='(min-width: 800px)' type='adsense' width='336'>
</amp-ad>Gunakan data-ad-client dan data-ad-slot yang sama pada ketiga kode amp-ad tersebut da simpan ketiga kode tersebut dalam satu slot iklan yang sama di blog Anda. Dan Anda bisa menggunakannya pada beberapa slot sesuai dengan desain tema Anda.
Iklan Responsif Dengan Tinggi Tetap
Sebagai bonus, Anda dapat memodifikasi kode iklan responsif Adsense dengan menentukan lebar yang dapat menyesuaikan dengan lebar slot iklan dan ketinggian tetap untuk unit iklan, misalnya dengan tinggi 90px.
Berikut adalah contoh bagaimana membuat modifikasinya untuk menentukan ketinggian tetap 90px dan lebar variabel dari lebar layar min-width 400px hingga max-width 970px:
Untuk Non AMP
Tambahkan CSS berikut di style blog Anda.
@media(min-width: 400px and max-width: 970px) {.iklan_responsive_3 { width: 100%; height: 90px; } }Kemudian tambahkan class iklan_responsive_3 pada kode iklan seperti berikut ini. Anda bisa menempatkan kode iklan yang sama di beberapa tempat sesuai desain blog Anda.
<ins class="adsbygoogle iklan_responsive_3"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Untuk AMP HTML
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' media='(max-width: 970px) and (min-width:400px)' type='adsense' layout='fixed-height'>
</amp-ad>Semoga bermanfaat. Jika ada kurang mengerti silahkan tanyakan di kolom komentar.