Cara Memasang Iklan Di Tengah Postingan Blogger

Cara Membuat Iklan AdSense Di Tengah Postingan Blog

Penempatan iklan di tengah artikel Blogger menjadi salah satu posisi favorit para publisher. Kenapa? Ketika pengunjung sedang asik baca, eh tau-tau di tengahnya ada iklan. Jelaslah keberadaannya pasti akan disadari dan tidak akan terlewat.

Tutorial ini sebenarnya sudah banyak dan pasaran banget. Tapi saya mau share saja script iklan AdSense tengah post ala Igniel ini. Siapa tau versi saya lebih cocok untuk blog kamu dibanding script lain yang sudah ada.

Cara Membuat Iklan Di Tengah Post

Agar iklan AdSense tengah artikel ini bekerja, silakan ikuti langkah-langkah berikut dengan cermat.

  1. Buka dashboard Blogger dan masuk ke menu Theme (Tema) » Edit HTML.
  2. Cari kode <data:post.body/>. Jika ada banyak, pastikan pilih yang berada di dalam tag kondisional Blogger khusus post.
  3. Tambahkan kode HTML ini DI BAWAH <data:post.body/> tadi.
    <div class='ignielMiddleAds'>
      <!-- Kode Iklan AdSense -->
    </div>
  4. Lalu tambahkan script ini DI ATAS </body>.
    <b:if cond='data:view.isPost'>
      <script> //<![CDATA[
        // Middle Ads Inside Post by igniel.com
        (function() {
          let ads = document.querySelector('.ignielMiddleAds');
            if (ads) {
            let post = document.querySelectorAll('.post-body br, .post-body p'),
              x = parseInt(post.length / 2);
            if (post[x].nodeName == 'P') {
              post[x].parentNode.insertBefore(ads, post[x]);
            }
            else {
              post[x].parentNode.insertBefore(ads, post[x].nextSibling);
            }
          }
        })();
      //]]> </script>
    </b:if>
  5. Tambahkan sedikit CSS agar iklannya tidak terlalu berdempet dengan konten di atas dan bawahnya. Simpan DI ATAS </style> atau ]]></b:skin>. Kalau jaraknya masih kurang atau terlalu berlebihan tinggal sesuaikan sendiri ya pada bagian margin.
    /* Middle Ads Inside Post by igniel.com */
    .ignielMiddleAds {
      display:block;
      margin: 1rem 0;
      padding: 0;
    }

Iklan yang muncul cuma satu ya. Kalau mau pasang sekaligus banyak, coba deh ikuti tutorial iklan tengah post berulang di Blogger yang lebih unik.

Hasil dari tutorial iklan AdSense tengah post ini bisa dicek di Codepen berikut. Untuk demo, saya ganti menggunakan gambar saja.

Untuk variasi posisi iklan lainnya, kamu bisa cek artikel yang berjudul kumpulan posisi iklan AdSense. Ada banyak jenis penempatan unik yang bisa dicoba untuk meningkatkan CTR maupun jumlah klik.

Tutorial ini tidak hanya berlaku untuk AdSense saja. Bisa juga kok dipakai untuk yang lain seperti MGID atau Adsterra, dan lainnya.

Artikel Terkait

41 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>
  • Zontraxfox
    3/7/22
    Profil: https://www.blogger.com/profile/13720898371858674456
    Makasih gan ilmunya
  • Ade RB
    14/5/22
    Profil: https://www.blogger.com/profile/13252175261867550435
    mantap
  • M_ar
    23/4/22
    Profil: https://www.blogger.com/profile/08719624085960115432
    Mantap,terimakasih ilmunya
  • TN
    8/4/22
    Profil: https://www.blogger.com/profile/10075976143116767975
    Artikel nya mantap dan sangat membantu ,,,terima kasih
  • Toko Buku Bekas Aksiku
    5/2/22
    Profil: https://www.blogger.com/profile/01677557629330387247
    Mba, mohon bahas pasang mesin telusur adsense yang benar hingga bisa tampil iklannya pada hasil pencarian saat digunakan. Terima kasih banyak ya sebelumnya.
  • Chakly Raflesia
    2/10/21
    Profil: https://www.blogger.com/profile/02106258514379347993
    Mbak kalo cara pasang iklan adsense di balik artikel atau artikelnya transparan gitu terus nanti background nya iklan adsense gitu gimana yah?
    • Aladokter
      6/11/21
      Profil: https://www.blogger.com/profile/06888846393866037196
      sependapat kaya iklan di atas seperti di background
  • Caraservis
    16/6/21
    Profil: https://www.blogger.com/profile/12082572390460100000
    sudah ku coba belum tahu hasilnya.. terima kasih infonya.
  • Hafiz Hafizol
    1/6/21
    Profil: https://www.blogger.com/profile/01506181444000830757
    Terima kasih posting nya..
    Salam dari Malaysia :D
  • Virandra
    27/5/21
    Profil: https://www.blogger.com/profile/17569768201264469409
    Makasih tutorialnya.
  • Catatan Ekstens
    22/5/21
    Profil: https://www.blogger.com/profile/01015199736475985078
    berhasil. terima kasih telah sharing.
  • Darmaji Nss
    17/4/21
    Profil: https://www.blogger.com/profile/06144209177269079140
    Mantaafff, tengkyu ilmunya kang
  • Mozu
    25/3/21
    Profil: https://www.blogger.com/profile/15656279653354976812
    klo pake widget html/javascript muncul

    klo pake cara yg ditulis diatas ini ga muncul knapa ya ?
  • Administrador
    22/2/21
    Profil: https://www.blogger.com/profile/12862529325600519357
    Halo, bagaimana cara meningkatkan jumlah iklan dalam artikel?
    Terima kasih dan selamat atas kerja bagusnya!
  • DiSC Profile
    30/12/20
    Profil: https://www.blogger.com/profile/14468426382304570778
    kurang jelas
  • Bagaimana Pak
    29/8/20
    Profil: https://www.blogger.com/profile/05675044215048818002
    ow its work. thank you
  • hadisumantri
    6/7/20
    Profil: https://www.blogger.com/profile/17116453314359364785
    Mvak Igniel, apakah ini tutorial juga bisa diterapkan selain Google Adsense, seperti adsterra atau mgid?
  • Sagita
    25/6/20
    Profil: https://www.blogger.com/profile/00000687804892437087
    Bisa dipasang pada halaman infinite scroll gak kak?
  • Unknown
    5/6/20
    Profil: https://www.blogger.com/profile/09960395718397889084
    Saya coba di fiksioner v2 nggak ngaruh mba, tolong buatkan utk fiksioner v2 dong
  • A
    19/5/20
    Profil: https://www.blogger.com/profile/01525572505760115913
    Iklan fixed tuh giman gan... Iklan Yang punya agan di tegah artikel yang posisinya seakan akan tidak bergerak.
  • Kumpulmu
    26/4/20
    Profil: https://www.blogger.com/profile/13988490326574489308
    Ini iklan di tengah artikel nya sma dengan blog mbak igniel kah yg kalau artikel d scrol kebawah iklan nya muncul gt?
  • Admin
    14/1/20
    Profil: https://www.blogger.com/profile/10713011023635819888
    sip. berhasil mas, thanks tipsnya .. ditunggu kunjungan baliknya https://www.basickomputer.com
  • Wisnu SN
    5/12/19
    Profil: https://www.blogger.com/profile/07213743551874695844
    Ini iklan yg panjang apa segi empat ya mbak igniel?
    • Igniel
      7/1/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bebas mas.
      Tutorial ini cuma bertujuan agar posisi iklan ada di tengah artikel. Soal unit iklan tergantung yang punya blog. Mau yang panjang atau segi empat bebas aja.
  • mr.admin
    22/11/19
    Profil: https://www.blogger.com/profile/15028257954639871095
    Kak. Templat fiksioner 2 kakak tidak ada iklan di Middle, yang ada di topsama bottom...Mhon solusinya kak. Terimakasih..
    • Igniel
      22/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Emang gak ada.
      Kamu lagi buka solusinya. Tinggal pasang script di artikel ini ke template Fiksioner.
  • Ely setiawan
    26/7/19
    Profil: https://www.blogger.com/profile/04921274668344702727
    bakal ane praktekan
  • Dimas Ibnu Malik
    22/3/19
    Profil: https://www.blogger.com/profile/05917111296805776153
    iklan yang cocok diletakkan disitu jenis apa ya mba ?
    • Igniel
      22/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iklan in-article
  • Berbagi Tutorial Online
    8/1/19
    Profil: https://www.blogger.com/profile/04152661055432787556
    ane kok begitu pasang langsung dapet peringatan dari google ya gan, gak boleh bikin konten yang mengesalkan
    • Igniel
      8/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tampilan template secara keseluruhan memang memusingkan pengunjung mungkin makanya dapet peringatan kaya gitu.
    • Berbagi Tutorial Online
      13/1/19
      Profil: https://www.blogger.com/profile/04152661055432787556
      ow...padahal template buatan mas sugeng.id
  • Bachrul Uluum
    2/12/18
    Profil: https://www.blogger.com/profile/11414951743210637729
    biar ada dua iklan atau lebih gimana ya mbak?
    • Igniel
      2/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pake ini.
      https://www.igniel.com/2018/11/multiple-iklan-dalam-post.html
    • Unknown
      4/2/20
      Profil: https://www.blogger.com/profile/07002527289365108449
      404 page not available
  • defantri.com
    13/11/18
    Profil: https://www.blogger.com/profile/07126573827912835475
    templatenya asik,..
    keren mas igniel,..
    ditunggu tutorial yang paralayang yang ditengah kalau di buka di hp..
    • A. Abdul Mustahab ツ
      14/11/18
      Profil: https://www.blogger.com/profile/05409057447679540831
      gak bakal di kasi kalo manggilnya mas... hahaha
    • Who?
      27/12/18
      Profil: https://www.blogger.com/profile/16729981113419204321
      Mas njirr
  • Manusia Biasa
    13/11/18
    Profil: https://www.blogger.com/profile/12579090126784004463
    Nyimak dulu min, belum pernah daftar adsense, di bookmark dulu yaa.. thank you min
  • Mas Trigus
    13/11/18
    Profil: https://www.blogger.com/profile/09328563638132730206
    Coba neng tutorial yang sama, tapi untuk blog AMP. Sampai sekarang saya belum nemu tutorialnya. Apa nyunsep di pelaminan ya.
  • Anonim
    Anonim 13/11/18
    artikelnya bagus gan saya perlu belajar di blog ini