Modifikasi Size Iklan Adsense Menjadi Lebih Responsive

Modifikasi Size Iklan Adsense Menjadi Lebih Responsive - Artikel kali ini menjawab semua rasa penasaran saya tentang bagaimana mengatur size iklan adsense agar sesuai layar (responsive) baik itu untuk tampilan mobile maupun desktop. Maka dari itu saya akan berbagi pengalaman modifikasi size iklan adsense supaya bisa tampil sesuai dengan yang kita inginkan, keren bukan!

Sebelum melangkah lebih lanjut, ada pertanyaan mendasar yaitu apakah boleh kita melakukan modifikasiiklan dari google adsense? berikut ini mari kita simak pedoman modifikasi kode iklan adsense, agar tidak terjadi kesalahan dalam mengubah size iklan adsense. klik disini

Dan ini adalah beberapa modifikasi kode iklan adsense yang dapat diterima atau diperbolehkan oleh pihak google, sebagai berikut :
    1. Desain Responsif
    2. Pengujian A/B
    3. Menetapkan Saluran Khusus Secara Dinamis
    4. Minimisasi Tag Iklan

Penambahan CSS Media agar ukuran iklan adsense sesuai layar.

 Kita ketahui pihak Google Adsense sudah memberikan CSS media untuk unit iklan responsive. Akan tetapi, hanya untuk size iklan dengan dimensi 728px * 90px saja. dan bila menampilkan size 620 x 90px dilayar desktop, maka akan tampil terpotong diperangkat 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 menarik adalah 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.

Dibawah ini adalah Script 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>

Catatan* 

yang dibutuhkan adalah kode ca-pub dan ad slot XXXX.

CSS Media yang akan di terapkan adalah

<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.

Demikianlah artikel mengenai Modifikasi Size Iklan Adsense Menjadi Lebih Responsive  , semoga bermanfaat ya!!

Tweet