ukuran iklan adsense

Modifikasi Ukuran Iklan Adsense Menjadi Besar Sesuai Layar Dan Responsive

Posting ini menjawab rasa penasaran saya tentang bagaimana mengatur ukuran iklan adsense agar sesuai layar, baik untuk tampilan dekstop maupun seluler (termasuk gadget dan ponsel cerdas). Dengan kata lain kita akan modifikasi iklan adsense agar bisa tampil sesuai dengan yang kita inginkan.

Sebelum berlanjut, apakah boleh kita melakukan modifikasi iklan dari google adsense? Kita simak sebentar uraian di bawah ini, agar tidak terjadi kesalahan dalam mengubah ukuran iklan adsense. Terutama sesuai dengan pedoman Modifikasi kode iklan AdSense.

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

  • Desain Responsif
  • Pengujian A/B
  • Menetapkan Saluran Khusus Secara Dinamis
  • Minimisasi Tag Iklan

Dan ini menyangkut unit iklan responsive dan minimasi tag iklan dengan modifikasi dengan media CSS.

Penambahan CSS Media agar ukuran iklan adsense sesuai layar

Meskipun pihak Google Adsense sudah memberikan CSS media untuk unit iklan responsive, namun hanya untuk ukuran iklan dengan dimensi 728px X 90px saja. Dan ketika menampilkan ukuran 620 X 90px dilayar dekstop, maka akan tampil terpotong di perangkat 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 istimewa, 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.

Loading...
ukuran iklan adsense
Iklan tampil penuh pada layar

Dibawah ini adalah script standar 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>

Yang kita butuhkan adalah kode ca-pub dan ad-slot XXXX pada sript diatas.

Dan dibawah ini adalah CSS Media yang akan kita terapkan

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

Setelah selesai, copy semua kode CSS tersebut kedalam widget atau bisa tempatkan iklan adsense di dalam postingan dengan plugin quick adsense.

Baca : Cara menggunakan plugin quick adsense

Tambahan : Cara ini juga berlaku untuk iklan adsense dengan ukuran custom size dan menjadikan ukuran custom size responsive tampil di dekstop maupun mobile.

Jika menggunakan blogger/blogspot

Parse dahulu kode script di atas Di sini

Khusus untuk iklan yang di simpan di dalam postingan, agar tidak error pada validasi HTML5 silahkan simpan kode CSS media unit iklannya di atas kode ]]></b:skin>atau </style>

Hilangkan kode <style scoped=’scoped’ type=’text/css’>

Dan tanpa menggunakan penutup </style> (jangan di pakai)

Cek tampilan iklan di seluler

Setelah itu kita dapat lihat hasilnya langsung untuk tampilan seluler, ada baiknya uji langsung menggunakan perangkat seluler milik anda. Apakah tampilan iklan sudah menyesuaikan.

Jika berhasil diterapkan dalam blog anda, ukuran iklan adsense akan menyesuaikan pada tinggi dan lebar layar area posting. Jadi seolah iklan memenuhi area posting dan berubah menjadi besar.

Dan jika pengunjung melakukan refresh pada halaman atau berpindah ke halaman posting lain, maka iklan adsense seolah olah berganti ukuran, tetapi sebenarnya hanya menyesuaikan ketersediaan iklan pada saat itu.

Selamat mencoba, jika terdapat masalah bisa urun rembuk di kotak komentar.


Loading...

Bagikan

ganisebastian

Penulis

Menulis dari berbagai pengalaman pribadi dan bisa dipertanggung jawabkan, jika bermanfaat bagi Anda silahkan share.

Komentar

    Avatar

    Kitapunya

    ( - 02:04)

    Awalnya saya coba gagal, ternyata kurang masukin kode setelah adsbygoogle. Dan sekarang sudah bisa gan, terimakasih banyak pokoknya. Sukses terus buat klikmania

    Avatar

    Materi online

    ( - 04:44)

    Wah berguna bgt nih buat website yg mau masangin iklan, Thnks ya,

    Avatar

    Materi online

    ( - 04:44)

    Wah berguna bgt nih buat website yg mau masangin iklan, mantap, bisa dicoba.. Thnks ya,

    Avatar

    Harmansyah

    ( - 01:09)

    Mas kalau cara merubah ukuran lebar iklan di header gmana mas? Coba mas cek blog saya di https://harmansh.blogspot.com/ lebar iklannya sedikit melebihi lebar header template

      ganisebastian

      ganisebastian

      ( - 01:31)

      Normal ukuran iklan untuk header di template blog Anda adalah 728 x 90. Karena bidang template terlalu sempit, maka bisa gunakan kode CSS dan rubah ukuran ke 700 x 90. Alternatif kedua adalah mengubah lebar kolom template sesuai ukuran header.

    Avatar

    jalanucul

    ( - 04:09)

    makasih gan tips nya, yuk ramein juga jalanucul.blogspot.com

    atau bs juga dengan ketik jalanucul di google search engine

    Avatar

    Ahmad Farhan

    ( - 04:28)

    Sip! Terimakasih banyak. Sempet bingung waktu mau masang di blogspot soalnya kode dengan tanda ” harus di ganti dengan ” juga kurang kode >.

    Oh iya, saya lihat di kebijakan google adsense yang sekarang, jumlah memasang iklan adsense kan sudah tidak lagi dibatas (termasuk ukuran juga), Nah.. kalau ukuran iklan yang disetting manual ini kira2 aman gak yah? soalnya saya pasang di awal dan akhir artikel dengan ukuran yang sama.

    Terimakasih banyak min 🙂

    Avatar

    Ranselusang

    ( - 01:35)

    Mau coba ukuran iklan yang pas dan cocok untuk bisa lebih menyatu dalam setiap postingan
    Makasih mas infonya, mau coba terapin dulu

    Avatar

    Zahwa

    ( - 08:57)

    Mas mau tanya kalau unit 728×90 boleh g mas? Takut ngelanggar kebijakan google diang mas
    Terima kasih

    Avatar

    Andhika Pandanu

    ( - 11:40)

    saya lihat iklan di blog ini yang bgian headernya gk responsive mas

    Avatar

    ramadhan

    ( - 09:06)

    hallo mas,, slm kenal , saya mau tanya, iklan saya kadang kadang tampil , kadang juga nggak tampil ,, apakah itu pengaruh dari apa?

    Avatar

    fadly lauso

    ( - 13:23)

    mas mau nanya nih , apa merubah ukuran iklan , gak melanggar tools google ? , apakah aman ? , mkasi

      ganisebastian

      ganisebastian

      ( - 15:20)

      Selama kode iklan tidak dirubah, tidak masalah mas. Yang kita gunakan adalah kode CSS.
      Lagipula Adsense juga menyediakan fitur custom size di dashboard Adsense, jadi untuk ukuran iklan bisa dirubah.

    Avatar

    wantos

    ( - 11:19)

    Untuk iklan selain Adsense apa bisa ma, semisal Adnow / Payclick, caranya gimana mas?

    Avatar

    newbie

    ( - 08:11)

    saya coba pasang di banner blogspot kok nggak bisa ya mas

    Avatar

    SepatuGocom

    ( - 02:12)

    gan saya mau pasang..
    tapi kalo untuk web toko online bagus gak ya…
    rencananya mau di pasang di toko online.. di landingkan ke toko online lainnya gitu..

    Thx

    Avatar

    Ijin coba ya Mas…Terima kasih

    Avatar

    klg

    ( - 10:35)

    tamabah ilmu tambah pengetahuan, mantab kang

    Avatar

    Uhendrayana

    ( - 10:56)

    Untuk di tengah postingan khusus nya di blogspot masih error gan, masih bingung saya 🙂

    Avatar

    Rumah GB VIP

    ( - 08:56)

    Mantab om sukses di saya lancar jaya. Header 728×90 saya matikan kalo untuk dibuka dari hp jadi tak terlihat ada iklan. tapi kalo dari komputer terlihat ada iklan di header. mantap ni tutor nya. Makasih banyak om.

    Avatar

    alviya

    ( - 15:31)

    hallo mas ghani,
    kalo untuk ukuran iklan 336×280 biar tampilan sesuai lebar sidebar gimana mas?

      ganisebastian

      ganisebastian

      ( - 05:34)

      Bisa ambil ukuran responsive mbak Alfi, maaf balesnya lama,,lagi sibuk diluaran 😀

    Avatar

    tutorial89

    ( - 03:00)

    makasih mas. saya coba dulu ni di blog saya

      ganisebastian

      ganisebastian

      ( - 04:25)

      Monggo gan, silahkan.. Wah, tumben juga nih main ke blog saya 😀

    Avatar

    Sangat sangat membantu sekali ni om , iklan yg ada di postingan saya selalau kecil sekali , semoga dengan menerapkan kode ini lebih maksimal lagi 🙂

    Avatar

    Hasrullah

    ( - 14:29)

    Wah ini yang saya cari mengenai ukuran iklan mas, ijin nyoba 🙂

    Avatar

    Sekarang di pengaturan iklan google adsense sudah tersedia iklan responsive ya mas 😀

    Avatar

    agugus.com

    ( - 15:16)

    saya coba kok belum berhasil mas, apa bisa di kasih screnshoot mas penerapan di edit html blogspot, biar tambah jelas

      ganisebastian

      ganisebastian

      ( - 21:07)

      Untuk blogspot memamg agak sedikit berbeda mas, karena media CSS nya ditempatkan tersendiri.

        Avatar

        thony

        ( - 13:31)

        ijin mas mas jadi untuk penerapan untuk blogspot dmn ya

    Avatar

    refsa

    ( - 08:27)

    wah makasih mas gani, saya dari dulu pengen iklannya kayak gitu ternyata gitu toh… ijin praktek mas.. 😀

    Avatar

    Niki Ali

    ( - 15:32)

    wah.. sangat membantu sekali mas gani.. terima kasih.. semoga makin update yang terbaru lagi tutorialnya

    Avatar

    Sandi Mulyadi

    ( - 18:17)

    Menarik sekali tulisannya, Bang Gani. Ane mau curhat sekaligus urung rembug hehehe. Rinciannya begini Bang Gani :

    1. Unit responsive (A) di sebelah kiri hanya akan terlihat di homepage
    2. Unit responsive (A) tersebut tidak terlihat di halaman posting/artikel, dan disini yang terlihat adalah unit yang lain (iklan berukuran statik, misal B).
    3. Iklan (B) akan menghilang saat kembali ke homepage, dan yang terlihat hanya si iklan (A)

    Menurut Bang Gani, apakah penggunaan kondisional tag (saya pengguna blogger) seperti yang saya uraikan tersebut diperbolehkan ? Tanya disini karena udah ubek-ubek di panduannya Adsense tapi belum nemu atau ane kurang beruntung :D.

    Terima kasih atas jawaban dan atensi serta artikelnya 😀

      ganisebastian

      ganisebastian

      ( - 20:02)

      Untuk setiap tampilan halaman hanya diperbolehkan memasang Maksimal 3unit AdSense untuk konten.

      Untuk menghindari pemasangan berlebihan pada unit ukuran iklan lainnya bisa digunakan tag kondisional, itu artinya menyembunyikan iklan pada halaman tertentu.

      Memang tidak ada aturan resmi dari halaman bantuan adsense apakah itu diperbolehkan atau tidak, tapi intinya tidak melanggar aturan jumlah maksimal iklan yang diperbolehkan.

      Dengan kata lain hanya untuk menghindari pemasangan unit iklan yang berlebihan, hal ini juga akan memaksimalkan kinerja ukuran unit iklan lainnya, karena pemasangan ukuran unit iklan yang bervariasi.

      Btw, saya juga menerapkan hal itu mas sandi mulyadi, bisa di cek untuk tampilan sidebar home page dan sidebar untuk konten 😀
      Selama ini juga belum pernah dapat teguran dari adsense.

        Avatar

        Sandi Mulyadi

        ( - 12:37)

        Terima kasih atas jawaban dan atensinya, Gan. Jadi lumayan tenang nih karena ada teman yang sama-sama menggunakan tag kondisional agar jumlah unit iklan tetap sesuai kebijakan Google Adsense hehehe.

    Avatar

    Jamiel

    ( - 12:07)

    Mas ghani, apakah CSS ini bisa digunakan untuk semua jenis iklan adsense bukan hanya iklan responsive saja? Mohon pencerahannya. Terima kasih

    Avatar

    Wahid Priyono

    ( - 05:35)

    Hallo Mas Gani, salam kenal. saya mau nanya, cara pasang iklan banner horizontal ke bawah (setelah judul yang di samping kiri konten artikel di blog ini gimana ya? (pengen pasang banner yg seperti itu? kasih tau caranya ya mas/pengaturan kode skripnya, please…terima kasih.

    Avatar

    Sangat membantu. Salam hormat

    Avatar

    Jamiel

    ( - 09:41)

    Saya masih gagal faham ni mas Ghani. Saya menggunakan blogspot. Apakah CSS ini bisa digunakan untuk semua unikt iklan Adsense mas?

      ganisebastian

      ganisebastian

      ( - 21:06)

      BIsa mas @Jamiel, Tiap-tiap unit iklan hanya diambil kode ca-pub dan ad-slot nya saja. Sedangkan kerangkanya menggunakan CSS media.

        Avatar

        Jamiel

        ( - 10:52)

        Mas Ghani, saya mau tanya lagi nih. Itu artinya CSS ini bisa digunakan untuk semua jenis unit iklan adsense ya, bukan iklan responsive saja kan? Mohon pencerahannya. Terima Kasih

    ganisebastian

    ganisebastian

    ( - 09:26)

    Oke mas huda.. Thanks atensinya 😀

    Avatar

    Huda

    ( - 10:20)

    udah solved mas.. ternyata dari kode yang mas gani tulis diatas, ada yang kurang, kurang di tanda titik pada iklan_responsive. jadi begini :
    <ins class=”adsbygoogle .iklan_responsive”

    tapi setelah saya tambahin titik, hasilnya iklan selalu gak nampil.
    akhirnya saya copast kode unit iklan aslinya, lalu saya tambahin class CSS nya itu, jdinya gini mas :

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

    suwun mas.. ahirnya bisa dah sekarang. makasih..

      ganisebastian

      ganisebastian

      ( - 10:30)

      Oh, terimakasih koreksinya mas huda.
      Sipp kalau begitu……Biar saya update postnya.
      Cermat sekali nih 😀

        Avatar

        Huda

        ( - 12:36)

        iya mas.. saya coba pake blogspot. cuma skedar test mas. masih belum berani pasang permanen. takut mas.. artikel masih dikit apalagi belum ngerti aturan-aturan lain. jadi tak pasang entar kalo artikel udah ngumpul banyak. sekarang sebatas belajar dulu.

        Makasih ya mas gani.. sukses selalu dah buat sampean.

          ganisebastian

          ganisebastian

          ( - 20:56)

          Betul mas huda. yang penting trafik. Adsense tanpa trafik akan sia2..hanya membuat loading blog berat.
          Btw, sukses juga buat mas huda, saya malah belum sempat kunjung balik. 😀

            Avatar

            Huda

            ( - 08:25)

            gak mengharap itu mas.. nyantai saja..
            kalo Tuhan ngasih rejeki visitor, pasti jg akan ada visitor yang lain. intinya saya mah skedar silaturahmi aja sambil memperdalam ilmu. biar nambah teman. makasih mas..

    Avatar

    Huda

    ( - 09:51)

    udah tak coba.. gak mau nampil iklannya mas..
    untuk ca-pub-XXXX” sama data-ad-slot=”XXXX“ itu kan di isi punyae iklan yang ukuran custom kan ?(600×300)
    kalo salah mohon koreksinya.

      ganisebastian

      ganisebastian

      ( - 10:22)

      Bisa di isi unit iklan apa saja mas, bahkan bisa untuk custom size (iklan sesuai ukuran kita). Yang di ambil hanya kode ca-pub dan kode ad slot saja.

      Setelah itu kode di tempatkan di Media CSS.
      Mas huda pakai blogspot ya?

    Avatar

    Huda

    ( - 07:29)

    asiik… ketemu nih tutorialnya.
    makasih mas.. saya ijin bookmark buat belajar. soalnya baru main adsense untuk blog nih. dpt pemberian sodara pula. oprek dulu ntar.. hasilnya ntar aku laporin kalo sukses atau gagal. thanks

      ganisebastian

      ganisebastian

      ( - 07:50)

      Wah beruntung banget dikasih akun adsense mas Huda. Soalnya banyak orang kebingungan mendaftar adsense dan selalu ditolak.
      Boleh mas, di coba langsung ke blog, tapi untuk blogspot agak sedikit berbeda caranya.
      Tapi sudah saya tulis kok di atas untuk referensi blogspot.

        Avatar

        Huda

        ( - 08:59)

        iya mas.. kata sodara adsense nya gak kepake.. ya udah aku mintain dianya mau ngasih. soalnya sodaraku jg udah gak ngeblog lagi. katanya dah gak ada waktu.
        iya mas… ntar saya coba. ini lagi sibuk ngurus bini lagi hamil tua.
        makasih tuts nya mas. ntar ana laporin disini hasilnya.

    Avatar

    Isrofi Achmad

    ( - 20:31)

    Kok ndak bisa ya mas, muncul peberitahuan seperti ini

    ” Kesalahan saat mengurai XML, baris 2066, kolom 25: The entity “rsquo” was referenced, but not declared “

      Avatar

      Isrofi Achmad

      ( - 20:33)

      Maaf yang ini mas “Kesalahan saat mengurai XML, baris 2066, kolom 15: Open quote is expected for attribute “scoped” associated with an element type “style”

        ganisebastian

        ganisebastian

        ( - 23:24)

        Mas @isrofi ahmad
        Khusus untuk blogger/blogspot

        Untuk iklan yang di simpan di dalam postingan, agar tidak error pada validasi HTML5 silahkan simpan kode CSS media unit iklannya di atas kode ]]> atau (tanpa kode <style scoped='scoped' type='text/css'> dan penutupnya )

      ganisebastian

      ganisebastian

      ( - 00:07)

      Sudah saya update postinganya mas , saya tambahkan khusus buat blogspot 😀
      Di simak baik-baik ya, sudah saya tested di blogspot saya berhasil.

        Avatar

        Isrofi Achmad

        ( - 19:51)

        Masih gagal faham saya mas 🙂

          ganisebastian

          ganisebastian

          ( - 21:42)

          Prinsipnya sama mas, hanya untuk blogspot harus ditempatkan dalam template untuk menampilkan iklan dalam postingan.

          Coba tengok blognya kompi ajaib untuk pemasangan di blogspot. Ini judulnya mas “CSS Media Untuk Unit Iklan Responsive Adsense”

          Untuk masalah penempatan kodenya.

    Avatar

    Isrofi Achmad

    ( - 03:47)

    Ini cocok juga kalu diterapin di blogspot kan mas, ijin bookmark dulu dah, nanti kalau pas sempet otak-atik bisa buka lagi.

      ganisebastian

      ganisebastian

      ( - 12:35)

      Owh bisa mas @isrofi achmad…Nanti kodenya di parse dahulu.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *