Cara Memasang Iklan AdSense Billboard Ukuran Besar Responsif

Cara Buat Iklan Adsense Besar Billboard Di Blog

Billboard adalah jenis iklan AdSense yang mempunyai ukuran besar, yaitu 970 x 250px. Dia bisa membuat penghasilan publisher semakin banyak dikarenakan ukurannya yang cenderung lebih besar dibandingkan dengan slot iklan lain mampu menarik perhatian visitor. Blog Igniel akan berbagi cara pasang iklan Billboard ukuran besar di blog agar earning AdSense kamu bisa sedikit bertambah.

1. Tambahkan Inline CSS

First thing first, tambahkan kode CSS berikut ke pengaturan HTML blog kamu. Simpan SEBELUM / DI ATAS ]]></b:skin> atau <style>.
.billboard {display:block; max-width:1000px; min-width:970px; width:100%; max-height:300px; min-height:250px; height:100%; text-align:center; margin:20px 0px; padding:0px}
@media screen and (max-width:969px){.billboard {min-width:728px; min-height:90px}}
@media screen and (max-width:727px){.billboard {min-width:336px; min-height:280px}}
@media screen and (max-width:335px){.billboard {min-width:300px; min-height:250px}}
@media screen and (max-width:299px){.billboard {min-width:250px}}
@media screen and (max-width:249px){.billboard {min-width:200px; min-height:200px}}

2. Edit Kode AdSense

Jangan salah kaprah ya, bukan edit yang aneh-aneh buat ngakalin Google kok. Cuma menambahkan gaya tampilan saja.
  1. Ambil kode AdSense masing-masing dan simpan dulu di notepad. Pilih jenis responsive saja. Misal kodenya kaya gini ya:
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxxxxxxxx"
         data-ad-slot="xxxxxxxxxxx"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

  2. Hapus inline CSS dan data-ad-format yang ada disana. Maksudnya yang style="display:block" dan data-ad-format="auto". Tambahkan class billboard yang tadi dibuat di langkah pertama. Sehingga kode akhirnya akan seperti ini.
    <ins class="adsbygoogle billboard"
         data-ad-client="ca-pub-xxxxxxxxxxx"
         data-ad-slot="xxxxxxxxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

3. Pasang Kode Iklan AdSense Billboard Di Blog

Sekarang saatnya menyimpan kode iklan yang sudah dimodifikasi tadi. Tambahkan dulu tag kondisional supaya iklan nggak bakal muncul di halaman statis, halaman pencarian, dan halaman error. Trus cari kode <div id='content-wrapper'> dan letakan kode berikut SESUDAH / DI BAWAHNYA.
<b:if cond='!data:view.isPage and !data:blog.searchQuery and !data:view.isError'>
<ins class="adsbygoogle billboard"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>

Jangan lupa simpan pengaturan dengan klik tombol Save theme

Penempatan iklannya nggak melulu mesti dibawah content-wrapper. Misal nih, kalau mau disimpen dibawah navigasi, cari dulu kode HTML navigasinya dan simpan script AdSense dibawahnya.

Oya, kode CSS diatas berfungsi agar tetap menampilkan iklan AdSense Billboard responsif yang rectangular ketika dibuka di device yang lebih kecil, misalnya tablet atau smartphone. Maksudnya, iklan nggak bakal tampil horizontal (lebar kesamping tapi nggak tinggi) atau vertikal (tinggi keatas tapi nggak lebar), namun tetap besar dari lebar dan tingginya. Semoga berhasil prakteknya.

Artikel Terkait

11 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Pegiat Literasi.com
    15/12/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    Mbak, iklan billboard ini bisa dipasang di bawah artikel gak mbak??dan gmana caranya?? karena blog saya..unit iklan bawah post yang paling banyak di klik. mungkin kalau iklan billbord ini lebih esar ukurannya dan lebih bagus kliknya.. mohon tuntunan..
  • Pegiat Literasi.com
    15/12/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    trima kasih mbak.. bisa gak agar iklannya jd stcky gt di ats layar itu... billbord tp sticky..
  • Penulis
    28/4/19
    Profil: https://www.blogger.com/profile/17292086367236862639
    Cara membuat iklan slide di atas gimana teh.. Trimakasih...
  • TW
    30/12/18
    Profil: https://www.blogger.com/profile/02453804335837462635
    ini perlu menggunkan iklan responsif tidak ? atau iklan dengan ukuran tertentu ?
    • Igniel
      30/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bebas pakai iklan ukuran berapa aja
  • medsa
    29/12/18
    Profil: https://www.blogger.com/profile/01166577560374407807
    makasih sobb.....
    jangan lupa mampir ke sini sob www.medsa.id
  • Ridho
    27/12/18
    Profil: https://www.blogger.com/profile/14265212452152675495
    Neng bagaimana cara mengatasi iklan adsense yang bikin lambat banget loading blog
    Ane bingung nanya siapa lagi dah
  • Acer
    12/9/18
    Profil: https://www.blogger.com/profile/05304794877861806481
    yowes lah udah keren nih blog ane,, dengn melihat panduan dari teh Igniel, makasih teh yoo...
  • Dyah Pitaloka
    31/7/18
    Profil: https://www.blogger.com/profile/05765992598190964387
    cara pasang iklan anchor supaya gak muncul di halaman pencarian & static page gimana mbak?

  • Cara Amazing
    28/2/18
    Profil: https://www.blogger.com/profile/07258328875162461997
    Teteh, bukannya kalau memodifikasi kode iklan melanggar TOS google Adsense?
    • Igniel
      28/2/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini cuma edit gaya / tampilan. Yang melanggar itu kalo edit javascriptnya