Kian hari, kian banyak orang yang mengunjungi blog dari perangkat mobile. Karena itu, bagi Anda yang menjalankan Google Adsense untuk menghasilkan uang dari blog, perlu memberi perhatian lebih kepada pengguna mobile. Salah satunya adalah mengenai ukuran unit iklan.Saran terbaik dalam hal ini adalah dengan menggunakan unit iklan responsif, yang mana akan menyesuaikan ukuran iklan sesuai dengan ukuran atau resolusi layar pengguna.
Tapi, bagaimana jika ukuran unit responsif tidak sesuai bagi kebutuhan tampilan blog Anda?
Nah, kali ini saya akan membahas cara mengatur unit iklan Adsense agar sesuai dengan ukuran layar pengguna. Dan untuk studi kasus, saya beri contoh penerapan ukuran iklan di Portal-Uang.
Ada banyak kondisi dimana unit iklan responsif tidak selalu pas dengan tampilan blog. Sebagai contoh, di Portal-Uang, saya memasang unit berukuran 160×600 di halaman depan yang berada di tengah-tengah.
Meski saya menggunakan unit responsif, saat dibuka pada layar yang lebih kecil, iklan akan mendorong konten ke bagian bawah, sehingga tampilan tampak tidak bagus.
Contoh lain, adalah unit yang berada di bawah setiap artikel, dimana pada tampilan desktop, saya menampilkan ukuran 620×90 px. Namun, ketika dibuka pada perangkat mobile, unit tersebut akan terpotong.Copyright
Untuk hal itu Anda perlu menggunakan modifikasi CSS pada unit iklan bersangkutan.
Contohnya pada unit di homepage, dimana saya menerapkan aturan seperti berikut:
– menyembunyikan iklan jika layar yang kurang dari 620px.
– merubah ukuran iklan menjadi 160 x 600px jika layar minimal 800px.
– selebihnya, akan ditampilkan ukuran 300 x 250px.
Maka Anda perlu menambahkan kode css sebagai seperti berikut:
<style type=”text/css”>
.adslot_home { display:inline-block; width: 300px; height: 250px; } @media (max-width: 620px) { .adslot_home { display: none; } }
@media (min-width:800px) { .adslot_home { width: 160px; height: 600px; } }
</style>
<ins class=”adsbygoogle adslot_home“
data-ad-client=”ca-pub-1234xxx”
data-ad-slot=”12345xxx”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Kode yang ditulis tebal, adalah kode yang perlu ditambahkan atau dirubah dari kode yang Anda ambil dari akun Adsense.
Seperti Anda lihat, kode:
data-ad-format=”rectangle” dan style=”display:inline-block;” tidak perlu disertakan lagi, karena sudah diatur melalui CSS.
Nah, sekarang bagaimana dengan unit di bawah artikel?
Prinsipnya tetap sama, kita memanfaatkan CSS untuk menentukan ukuran iklan. Adapaun aturan atau kondisi yang saya terapkan adalah sebagai berikut:
– Jika layar maksimal 450px, ukuran iklan menjadi 300 x 250px.
– Jika layar minimal 500px, ukuran iklan menjadi 336 x 280px.
– Jika layar minimal 800px, ukuran iklan menjadi 620 x 90px.
– Selebihnya akan tampil ukuran 336 x 280px.
Maka kode yang digunakan akan seperti ini:
<style type=”text/css”>
.iklan_bawah { width: 336px; height: 280px; }
@media (max-width:450px) { .iklan_bawah { width: 300px; height: 250px; } }
@media (min-width:500px) { .iklan_bawah { width: 336px; height: 280px; } }
@media (min-width:800px) { .iklan_bawah { width: 620px; height: 90px; } }
</style>
<ins class=”adsbygoogle iklan_bawah“
style=”display:inline-block;”
data-ad-client=”ca-pub-1234xxx”
data-ad-slot=”1234xxx” </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Untuk mengeceknya, jika menggunakan Chrome Anda bisa memasang plugin mobile browser emulator, atau paling bagus yang langsung membuka blog Anda melalui gadget yang Anda punyai.
Dan berikut adalah contoh bagaimana tampilan iklan di bawah artikel Portal-Uang pada layar 320 x 568px:
Bagaimana? Mudah sekali bukan? Semoga dengan cara ini, unit iklan Anda akan tampil sempurna pada sembarang perangkat mobile dengan ukuran layar berbeda-beda. Diharapkan dengan demikian, potensi penghasilan Anda dari Adsense bisa maksimal.
Tentu saja, kode-kode di atas hanya sebagai contoh. Anda bisa menyesuaikannya dengan kebutuhan desain blog Anda sendiri.
Semoga bermanfaat. Saya berterima kasih sekali, jika mau membagikan artikel ini.
Terimakasih Sampai Berkunjung Kembali.
0 Comments