Cara Memasang Iklan AdSense di Atas dan Bawah Postingan Blogger

Cara Memasang Iklan AdSense di Atas dan Bawah Postingan Blogger

Penempatan iklan yang umum ditemukan adalah sebelum dan sesudah (atas dan bawah) isi postingan. Posisi ini paling direkomendasikan karena akan selalu terlihat oleh pengunjung sehingga potensi mendapatkan klik semakin besar.

Jika kamu masih bingung bagaimana caranya memasang iklan sebelum dan sesudah isi artikel, maka tutorial ini akan sangat membantu. Bagi publisher baru sangat perlu untuk mencoba meletakkan iklan di posisi ini. Sebenarnya pertanyaan tentang bagaimana caranya meletakkan iklan sebelum dan sesudah isi postingan pernah dibahas di artikel yang berjudul Cara Memasang Kode Iklan AdSense di Blogger. Tapi akan saya ulas kembali agar lebih jelas.

Cara Membuat Iklan AdSense di Atas dan Bawah Artikel

Sebelumnya kamu harus membuat slot iklan AdSense terlebih dulu. Setelah itu buka dashboard Blogger dan masuk ke Theme (Tema) » Edit HTML.

Cari kode ini.
<data:post.body/>

Jika ada banyak, pilih yang ada di dalam tag kondisional halaman posting seperti ini.
<b:if cond='data:view.isPost'>
  ....
  <data:post.body/>
  ....
</b:if>

Bisa juga tag kondisionalnya masih menggunakan cara lama, sehingga kodenya seperti ini.
<b:if cond='data:blog.pageType == "item"'>
  ....
  <data:post.body/>
  ....
</b:if>

Setelah itu tinggal tambahkan beberapa baris kode HTML.
<b:if cond='data:view.isPost'>
  ....
  <div class='iklanatas'>
    <!-- Tulis kode iklan disini -->
  </div>
  <data:post.body/>
  ....
  <div class='iklanbawah'>
    <!-- Tulis kode iklan disini -->
  </div>
</b:if>

Nah tinggal hapus <!-- Tulis kode iklan disini --> dan ganti dengan kode iklan AdSense.

Jika terjadi error saat save template, ganti penulisan async menjadi async="async" pada script iklan.
<!-- SEBELUM -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- SESUDAH -->
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Hasil akhir dan kode lengkapnya kurang lebih seperti ini.
<b:if cond='data:view.isPost'>
  ....
  <div class='iklanatas'>
    <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
      data-ad-slot="xxxxxxxxxx"
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
  <data:post.body/>
  ....
  <div class='iklanbawah'>
    <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
      data-ad-slot="xxxxxxxxxx"
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</b:if>

Sebenarnya script eksternal <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> hanya perlu dipanggil sekali. Jika ditulis berulang malah akan memberatkan blog. Selengkapnya bisa pelajari artikel Cara Menulis Kode Iklan AdSense Yang Efisien.

Lalu tambahkan CSS ini agar jarak iklan tidak terlalu berdekatan dengan isi postingan. Simpan DI ATAS </style> atau ]]></b:skin>.
.iklanatas {margin:0px 0px 10px; padding:0px}
.iklanbawah {margin:10px 0px 0px; padding:0px;}

Terakhir simpan template dan lihatlah hasilnya. Gampang kan menerapkan tutorial pasang iklan AdSense di atas dan bawah artikel Blogger ini.

Artikel Terkait

8 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • blognoler
    26/9/22
    Profil: https://www.blogger.com/profile/17361664189112470871
    Terimakasih kak, infonya sangat membantu sekali buat pemula seperti saya. Salam sukses
  • cahpondokkan
    24/8/22
    Profil: https://www.blogger.com/profile/17874808472534078412
    makasih bund, sangat membantu sekali
  • Administrator
    3/8/21
    Profil: https://www.blogger.com/profile/16517308994321252766
    Terima kasih infonya kak
  • Karlina
    2/8/20
    Profil: https://www.blogger.com/profile/09112368890672057648
    mba tolong dong, saya pakai template seo-boost dari gooyaabi theme, uda nyoba segala macem cara juga tetep gamau yak
  • Sang Prabu
    20/2/19
    Profil: https://www.blogger.com/profile/04443004242282164886
    gimana caranya merubah type iklan dari yang pake ukuran costum, ke responsive, apakah bisa diedit atau buat unit iklan baru???
    • Hallobanua
      15/4/21
      Profil: https://www.blogger.com/profile/14426752731444738169
      Bisa,pengaturan tinggal pada Adsensenya saja
  • Syafiq
    13/11/18
    Profil: https://www.blogger.com/profile/04007798583952663891
    Kak, bisakah saya request kode untuk 4 unit iklan dalam post? Bentuknya jadi kurang lebih :

    --- (Iklan 1) ---

    Tulisan Artikel

    --- (Iklan 2) ---

    Tulisan Artikel

    --- (Iklan 3) ---

    Tulisan Artikel

    --- (Iklan 4) ---

    Saya pernah coba buat seperti ini, tapi hasilnya malah rusak.
    • Igniel
      15/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Enjoy.
      https://www.igniel.com/2018/11/multiple-iklan-dalam-post.html