Cara Manual Mengatur Ukuran Iklan Google AdSense Responsive – Dengan berkembangnya perangkat smartphone dan tablet, dan internet saat ini sudah banyak di akses melalu perangkat tersebut maka memaksa berbagai desain website mengikuti perkembangan ke arah mobile, sehingga para desainer dan developer membuat desain website yang akan secara otomatis mengikuti ukuran layar pada berbagai macam perangkat seperti tablet, smartphone maupun desktop yang disebut sebagai desain responsive.

Tidak hanya desain web yang mengikuti perkembangan tapi Google juga telah menambahkan type iklan responsive pada Google AdSense agar publisher adsense bisa memaksimalkan pendapatan iklan dari perangkat mobile, tablet maupun desktop.

Namun keberadaan type iklan Google AdSense responsive masih belum bekerja secara sempurna untuk semua desain web. Ukuran jenis iklan responsive kadang tidak sesuai dengan desain web dan malah memperburuk tampilan web tersebut. Untuk membuat iklan adsense terlihat sempurna sesuai keinginan Anda, berikut akan saya tunjukkan cara manual mengatur ukuran iklan Google AdSense responsive untuk situs web atau blog Anda.

Baca : Cara Pasang Google AdSense di WordPress

1. Memasang Iklan Responsive

Sebelum kita ke cara manual mengatur ukuran iklan adsense responsive, sebaiknya kita pelajari dulu cara memasang type iklan responsive Google AdSense :

Pertama-tama klik menu My Ads » + New Ad Unit, setelah itu akan muncul halaman baru dan silahkan masukkan nama iklan, dalam contoh ini saya akan mengetikkan iklan responsive. Dan pada bawahnya di Ad sizes bagian showing silahkan pilih Responsive, untuk type iklan pilih text & display ads. Lihat seperti gambar dibawah ini.

Jika sudah ada atur seperti gambar diatas selanjutnya klik tombol save and get code. Dan pop up akan muncul dengan code yang harus Anda copy dan simpan code iklan tersebut. Jika sudah anda copy code tersebut silahkan klik tombol close.

Silahkan masukkan kode iklan tersebut ke area iklan yang sudah tersedia di blog atau website Anda. Dan coba untuk melihat tampilan iklan di berbagai perangkat, seperti tablet, smartphone dan desktop. Atau Anda bisa melakukan testing melalui browser chrome dengan menginstall ekstensi mobile emulator. Buka browser chrome Anda dan klik disini untuk install ekstensi.

Jika jenis iklan Google AdSense responsive tidak tampil sesuai dengan yang Anda inginkan atau tidak sesuai dengan desain ukuran iklan yang Anda inginkan silahkan gunakan cara manual berikut ini.

2. Mengatur unit iklan responsive Manual

Untuk membuat ukuran iklan responsive sesuai dengan keinginan Anda memang di perlukan tambahan kode manual, karena iklan responsive dari google terseting secara auto, sehingga tinggi dan lebar masih belum sesuai dengan desain yang Anda inginkan. Untuk membuat sesuai keinginan Anda silahkan tambahkan code berikut di atas code adsense yang sudah Anda dapatkan tadi.

<style type=”text/css">
.iklan_responsive {width: 728px; height: 90px;}
@media (max-width:300px) {.iklan_responsive {width: 300px; height: 70px;}}
@media (min-width:336px) {.iklan_responsive {width: 336px; height: 80px;}}
@media (min-width:600px) {.iklan_responsive {width: 600px; height: 90px;}}
</style>

Pada contoh script diatas saya menggunakan class .iklan_responsive dan saya ingin menjadikan iklan ukuran 728X90 px menjadi responsive. Ukuran tersebut akan saya rubah menjadi 3 bagian.

• Jika ukuran layar maksimal 300 pixel maka ukuran iklan di tampilkan dengan ukuran 300X70 pixel
• Jika ukuran layar minimal 336 pixel maka ukuran iklan di tampilkan ukuran 336X80 pixel
• Jika ukuran layar minimal 500 pixel maka ukuran iklan di tampilkan ukuran 480X90 pixel
• Dan selebihnya akan ditampilkan 728X90 pixel

Untuk script diatas yang sudah di gabung dengan code iklan adsense jadinya akan seperti dibawah ini.

<style type=”text/css”>;
.iklan_responsive {width: 728px; height: 90px;}
@media (max-width:300px) {.iklan_responsive {width: 300px; height: 70px;}}
@media (min-width:336px) {.iklan_responsive {width: 336px; height: 80px;}}
@media (min-width:600px) {.iklan_responsive {width: 600px; height: 90px;}}
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script>;
<!-- Iklan Responsive -->
<ins class="adsbygoogle iklan_responsive" 
     data-ad-client="ca-pub-1188813100xxxxx" 
     data-ad-slot="41267xxx"</ins>;
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Silahkan tambahkan class iklan_responsive di sebelah “adsbygoogle” lihat code diatas pada baris ke 10 sehingga menjadi “adsbygoogle iklan_responsive” dan jangan lupa hapus code iklan adsense (style=”display:block”) dan (data-ad-format=”auto”).

Jika sudah silahkan simpan dan lihat iklan Adsense Anda di berbagai ukuran layar, maka otomatis akan berubah menyesuaikan dengan ukuran yang sudah Anda buat. Selamat mencoba dan semoga bermanfaat. 🙂

Baca : Plugin Google Untuk Iklan Adsense WordPress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.