Google Adsense

Cara Mengatur Ukuran Iklan Adsense Sesuai Layar

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.

Lalu bagaimana mengatur agar ukurannya pas, sesuai dengan layar pengguna saat membuka Portal-Uang.

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:

merubah ukuran iklan sesuai ukuran layar

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.

Salam.

Tentang penulis

Gee Jhon

Gee Jhon

Seorang yang suka belajar, senang berbagi dan gemar berdiskusi. Full time kerja online menjadi freelancer desain grafis, Youtuber serta mengelola beberapa blog.

Tulis komentar

32 Komentar

  • mas untuk penerapannya di cepot apa perlu di parse dulu kode iklannya, kemudian saya mengubah ukuran iklan responsive dengan cara manual tapi kok iklannya g muncul ya mas.. mohon jawabannya trims

  • Mas Gee, ijin tanya. Saya sudah coba kode di atas namun ada sedikir masalah.
    Jika saya pasang kode itu ke template blogger sehingga otomatis muncul di bawah judul, maka iklan mau muncul. Namun jika saya langsung masukkan ke artikelnya langsung ternyata gak mau muncul. Kira2 yg salah dimana?

    Saya sempat baca2 katanya harus masukin CSS ke template juga. Maksudnya CSS yang mana? Terus kalau sudah masukin CSS ke template apa untuk kode iklan tetep ditulis lengkap seperti di aats atau cuma unit iklatnya saja tanpa tambahan CSS

  • mas saya sudah praktekin, dan yang menjadi pertanyaan saya, biar wadah atau tempatnya iklan besar seperti blog portal uang bagaimana ? biar iklan bisa tampil besar.
    saya terapkan hasilnya wadahnya/tempatnya kecil jadi iklannya ikut kecil.
    merubah seetingannya dimana biar iklannya dibawah postingan besar.
    blog saya http://www.agugus.com hosting blogger
    terimakasih

  • Halo mas Gee? Apa kabar? Semoga baik yah…

    Oke, langsung saja saya mau tanya mas… Saya ada pertanyaan ni mas. Saya sudah pasang sama seperti yang dibagikan mas Gee di atas dan semuanya OKE. Tapi waktu saya buka website saya dari handphone, menggunakan browser Opera, kenapa iklan pertama saya tidak muncul ya?

    Misal saya memasang 3 iklan unit kotak, nah di iklan unit kotak yang paling atas, selalu tidak muncul iklannya. Itu kondisi kalau dibuka melalui handphone dan menggunakan Opera. Kalau tempat mas Gee kok bisa muncul semua ya?

    Mungkin mas Gee pernah mengalami hal seperti saya ini? Kira-kira bagaimana solusinya ya mas? Terimakasih.

    • Kabar baik bos. Apakah bila dibuka, misal, pake chrome bisa tampil? Bila tampil, berarti masalahnya di opera. Bila sama gak muncul, sptnya ada yg salah dg pengaturan nilai px lebar layarnya. Coba cek sekali lagi bos. Sesuaikan dg lebar layarnya handphone nya.

      • Kalau dibuka dari chrome atau mozilla bisa tampil, bagus dan rapi… 😀 Tapi kalau dibuka pakai Opera, iklan yang letaknya paling atas (selain link ads) pasti blank alias tidak tampil apa-apa…

        Beda banget dah, sama punya portal uang yang iklannya muncul semua sekalipun di buka dari Opera.

        Saya browsing2 di internet, ternyata banyak juga yang senasib dengan saya. Dan sepertinya belum ada solusinya. Tapi di portal uang bisa tampil semua tuh mas…

        Mohon bantuannya… Berikan petunjuk mas… 😀

      • Hmmm… Sy Kira tu pengaruh template bos. Coba buat blog baru tuk uji coba saja. Pake template lain, Dan lihat. Bila iklan muncul maka itu penyebabnya.

  • Saat mengatur template blog, apa kita harus mengaktifkan “Ya. Tampilkan template seluler di perangkat seluler,” kemudian memilih khusus atau “Tidak. Tampilkan template seluler di perangkat seluler. ”

    Makasi mas bro…

  • Saya sering mengalami iklan yang tampil di tampilan mobile berupa iklan aplikasi android yang menurut saya cpc nya kecil banget, ada tips gak untuk mengatur iklan yg responsive namun tetap bernilai tinggi, karena saya coba block pakai app publisher di chrome gak kebaca kalau dalam tampilan yang di kecilkan.

    • baiklah. pertama: dari mana mas Tommy tahu klo satu iklan nilai cpc-nya kecil banget? emang kita bisa lihat tahu iklan apa yg baru saja diklik pengunjung?

      kedua, tapi okelah kalau emang mau diblokir, maka cara paling tepat adalah dg memblokir url iklan tersebut dari setelan iklan di akun adsense.

  • belum berhasil, kode ads ada yg beda dgn yg diatas ini bgmn mas gj. ada scrip asycnyrom

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

    itu pakenya iklan jenis responsive atau bukan. klo responsive ada autonya itu bgmn? terimakasih

    • baik, itu tidak masalah bos edi, berikut contoh penerapan untuk:
      – ukuran default 300×250
      – jika kurang dari 500px, iklan disembunyikan
      – jika lebih dari 800px, tampil ukuran 620×90.

      <style type="text/css">
      .ads_bawah { width: 300px; height: 250px; }
      @media (max-width:500px) { .ads_bawah { display: none; } }
      @media (min-width:800px) { .ads_bawah { width: 620px; height: 90px; } }
      </style>

      <ins class="adsbygoogle ads_bawah"
      style="display:inline-block"
      data-ad-client="ca-pub-[ganti dg pu-id]"
      data-ad-slot="[ganti dg kode slot iklan]"

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

      ——————
      cukup ganti pub-id dan slot iklannya saja.

  • Terimakasih mas, artikel nya sangat informatif. Walaupun blog saya belum genap satu bulan, artikel ini akan jd bahan referensi saya saat nanti pasang iklan adsense jika sudah diterima.

  • pas banget ini mas artikelnya, saya lagi mencari cara pasang iklan bukan jenis responsif tapi bisa menyesuaikan layar perangkat yg digunakan supaya ukuranya maksimal.

    bisa dicoba, tanks mas gj.

%d blogger menyukai ini: