Cara Terbaru Modifikasi Ukuran Iklan Adsense Agar Sesuai Lebar Layar dan Responsive

Berbagi Ilmu    Blogger    Comment   

Cara Terbaru Modifikasi Ukuran Iklan Adsense Agar Sesuai Lebar Layar dan Responsive

Semakin berjalannya waktu, semakin berkembang pula teknologi. Dulu untuk mengakses internet kebanyakan orang memilih untuk pergi ke warnet, sekarang itu sudah terkalahkan oleh perangkat mobile atau yang disebut smartphone. Hal itu juga berpengaruh terhadap developer website supaya bisa mengikuti perkembangan teknologi tersebut. Sehingga saat ini telah terwujud desain website yang dapat mengikuti ukuran layar dari berbagai perangkat seperti smartphone, tablet, serta desktop yang sekarang dikenal sebagai desain yang responsive.

Kondisi tersebut memaksa para developer untuk dapat menyesuaikan semua yang berhubungan dengan kemajuan teknologi. Salah satunya yaitu Google khususnya pada Google Asense. Google Adsense telah menambahkan iklan dengan type responsive yang bertujuan agar pendapatan iklan para pengiklan atau publisher Google Adsense dapat maksimal pada perangkat desktop, moblie, maupun tablet.

Akan tetapi kerja iklan Adsense type responsive ini masih belum sempurna karena belum tentu bekerja dengan baik pada sebagian desai website. Terkadang ukuran iklan melebihi ruangan iklan yang tersedia, sehingga iklan tampak terpotong dan akan memperjelek tampilan website. Bagaimana agar ukuran iklan Adsense dapat sesuai dengan lebar layar? Kalian tidak perlu khawatir, ukuran iklan Adsense bisa diatur sesuai keinginan agar menjadi responsive pada website. Pada artikel ini saya akan menerangkan cara menyesuaikan ukuran iklan secara manual agar responsive dengan menggunakan media CSS.

Baca juga:6 Cara Ampuh Mempercepat Loading Blog seperti Kilat

Apakah kita boleh memodifikasi atau mengganti ukuran iklan Adsense sesuai keinginan kita? Berikut beberapa penjelasan yang saya dapat dari situs Klik Mania tentang memodifikasi kode iklan Adsense :

Ini adalah beberapa modifikasi kode iklan Adsense yang dapat diterima atau diperbolehkan oleh pihak Google Adsense :

• Minimisasi tag iklan
• Pengujian A/B
• Desain Responsive
• Menetapkan Saluran Khusus Secara Dinamis

Dapat disimpulkan bahwa hal di atas mencakup minimasi tag iklan melalui media CSS dan unit iklan responsive.

Cara Mengatur Ukuran Iklan Adsense agar Responsive secara Manual

Seperti yang sudah disinggung di atas bahwa kali ini saya akan menjelaskan cara mengatur ukuran iklan Adsense agar responsive sesuai keinginan kita di berbagai perangkat seperti perangkat mobile, tablet, maupun desktop menggunakan media CSS.

Sebenarnya unit iklan type responsive pada Google Adsense secara otomatis ukuran iklan dapat menyesuaikan layar perangkat, namun itu tidak bekerja dengan maksimal. Seperti di blog saya misalnya, sebelum saya memasang CSS pada kode unit iklan Adsense secara manual, iklan Adsense saya akan selalu terpotong jika situs saya dibuka melalui perangkat mobile. Langsung saja untuk membuat ukuran iklan Adsense agar responsive sesuai keinginan kalian perlu merubah kode unit iklan Adsense menjadi seperti berikut.

<style>

.responsive_iklan_1 { width: 320px; height: 100px; }

@media(min-width: 500px) { . responsive_iklan_1 { width: 468px; height: 60px; } }

@media(min-width: 800px) { . responsive_iklan_1 { width: 728px; height: 90px; } }

</style>

<!-- responsive_iklan_1 -->

<ins class="adsbygoogle responsive_iklan_1"

     style="display:inline-block"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Keterangan :

• .responsive_iklan_1 { width: 320px; height: 100px; } merupakan pengaturan ukuran iklan Adsense pada perangkat mobile.
• @media(min-width: 500px) { . responsive_iklan_1 { width: 468px; height: 60px; } } merupakan pengaturan ukuran iklan Adsense pada perangkat tablet.
• @media(min-width: 800px) { . responsive_iklan_1 { width: 728px; height: 90px; } } merupakan pengaturan ukuran iklan Adsense pada perangkat desktop.
• xxxxxxxxxxxxxxxx silahkan isi dengan pub Adsense kalian.
• xxxxxxxxxx silahkan isi dengan id unit iklan Adsense kalian.

Di sini kita akan mengubah kode unit iklan bawaaan Adsense diantaranya menghilangkan kode style=”display:block” dan data-ad-format=”auto” serta menambahkan sebuah kelas setelah “adsbygoogle” sehingga menjadi “adsbygoogle responsive_iklan_1”. Kode tersebut dapat diterapkan pada widget maupun di dalam postingan. Jika menghendaki ukuran yang sama pada setiap unit iklan kalian, tidak perlu mengulang kode CSS nya, hanya perlu menambahkan kelas setelah “adsbygoogle” sehingga menjadi “adsbygoogle responsive_iklan_1” seperti berikut.

<!-- responsive_iklan_1 -->

<ins class="adsbygoogle responsive_iklan_1"

     style="display:inline-block"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Keterangan :

• xxxxxxxxxx ganti dengan id iklan yang lain.
• xxxxxxxxxxxxxxxx ganti dengan pub Adsense kalian.

Jika sudah selesai kemudian simpan dan lihatlah perbedaan website kalian, iklan Adsense kalian secara otomatis akan mengikuti lebar dari perangkat mobile, tablet, maupun desktop.

Kalian dapat menyesuaikan ukuran di atas sesuai keinginan kalian. Jangan sampai ukuran yang kalian masukkan tidak termasuk ke dalam ukuran unit iklan yang direkomendasikan oleh pihak Google Adsense, hal itu mengakibatkan iklan kalian tidak bekerja dengan maksimal sehingga berpengaruh pada pendapatan Adsense kalian. Jika kalian belum terlalu paham tentang ukuran unit iklan Adsense sebaiknya kalian baca artikel : 

Inilah 10 Format Ukuran Iklan Adsense Terbaik Berpenghasilan Tinggi. 

Mencakup ukuran iklan Adsense yang cocok diletakkan di bagian sidebar, bawah header, dll.

Mungkin itu saja pembahasan tentang cara manual mengatur ukuran iklan Adsense agar responsive sesuai lebar semua perangkat. Semoga artikel ini bermanfaat, jangan lupa share kalau menurut kalian artikel ini bermanfaat. Salam Blogger!!!

Pencarian terkait :

• Cara memodifikasi iklan Adsense agar responsive.
• Cara manual mengubah ukuran iklan Adsense agar sesuai dengan layar.
• Cara terbaru memodifikasi ukuran iklan Adsense agar responsive.
• Cara memodifikasi ukuran iklan Adsense sesuai keinginan dengan CSS.