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

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

4 Komentar

  1. Teteh, bukannya kalau memodifikasi kode iklan melanggar TOS google Adsense?

    ReplyDelete
    Replies
    1. Ini cuma edit gaya / tampilan. Yang melanggar itu kalo edit javascriptnya

      Delete
  2. cara pasang iklan anchor supaya gak muncul di halaman pencarian & static page gimana mbak?

    ReplyDelete
  3. yowes lah udah keren nih blog ane,, dengn melihat panduan dari teh Igniel, makasih teh yoo...

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>