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

42 komentar

  • 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Administrator
    30 Januari, 2023
    Profil: https://www.blogger.com/profile/01640506093400075133
    kalo di bawah gambar pertama kodenya gimana ya mbak?
  • Zontraxfox
    03 Juli, 2022
    Profil: https://www.blogger.com/profile/13720898371858674456
    Makasih gan ilmunya
  • Ade RB
    14 Mei, 2022
    Profil: https://www.blogger.com/profile/13252175261867550435
    mantap
  • M_ar
    23 April, 2022
    Profil: https://www.blogger.com/profile/08719624085960115432
    Mantap,terimakasih ilmunya
  • TN
    08 April, 2022
    Profil: https://www.blogger.com/profile/10075976143116767975
    Artikel nya mantap dan sangat membantu ,,,terima kasih
  • Toko Buku Bekas Aksiku
    05 Februari, 2022
    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
    02 Oktober, 2021
    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
      06 November, 2021
      Profil: https://www.blogger.com/profile/06888846393866037196
      sependapat kaya iklan di atas seperti di background
  • Caraservis
    16 Juni, 2021
    Profil: https://www.blogger.com/profile/12082572390460100000
    sudah ku coba belum tahu hasilnya.. terima kasih infonya.
  • Hafiz Hafizol
    01 Juni, 2021
    Profil: https://www.blogger.com/profile/01506181444000830757
    Terima kasih posting nya..
    Salam dari Malaysia :D
  • Virandra
    27 Mei, 2021
    Profil: https://www.blogger.com/profile/17569768201264469409
    Makasih tutorialnya.
  • Catatan Ekstens
    22 Mei, 2021
    Profil: https://www.blogger.com/profile/01015199736475985078
    berhasil. terima kasih telah sharing.
  • Darmaji Nss
    17 April, 2021
    Profil: https://www.blogger.com/profile/06144209177269079140
    Mantaafff, tengkyu ilmunya kang
  • Mozu
    25 Maret, 2021
    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 Februari, 2021
    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 Desember, 2020
    Profil: https://www.blogger.com/profile/14468426382304570778
    kurang jelas
  • Bagaimana Pak
    29 Agustus, 2020
    Profil: https://www.blogger.com/profile/05675044215048818002
    ow its work. thank you
  • hadisumantri
    06 Juli, 2020
    Profil: https://www.blogger.com/profile/17116453314359364785
    Mvak Igniel, apakah ini tutorial juga bisa diterapkan selain Google Adsense, seperti adsterra atau mgid?
  • Sagita
    25 Juni, 2020
    Profil: https://www.blogger.com/profile/00000687804892437087
    Bisa dipasang pada halaman infinite scroll gak kak?
  • Unknown
    05 Juni, 2020
    Profil: https://www.blogger.com/profile/09960395718397889084
    Saya coba di fiksioner v2 nggak ngaruh mba, tolong buatkan utk fiksioner v2 dong
  • A
    19 Mei, 2020
    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 April, 2020
    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 Januari, 2020
    Profil: https://www.blogger.com/profile/10713011023635819888
    sip. berhasil mas, thanks tipsnya .. ditunggu kunjungan baliknya https://www.basickomputer.com
  • Wisnu SN
    05 Desember, 2019
    Profil: https://www.blogger.com/profile/07213743551874695844
    Ini iklan yg panjang apa segi empat ya mbak igniel?
    • Igniel
      07 Januari, 2020
      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 November, 2019
    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 November, 2019
      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 Juli, 2019
    Profil: https://www.blogger.com/profile/04921274668344702727
    bakal ane praktekan
  • Dimas Ibnu Malik
    22 Maret, 2019
    Profil: https://www.blogger.com/profile/05917111296805776153
    iklan yang cocok diletakkan disitu jenis apa ya mba ?
  • Berbagi Tutorial Online
    08 Januari, 2019
    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
      08 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tampilan template secara keseluruhan memang memusingkan pengunjung mungkin makanya dapet peringatan kaya gitu.
    • Berbagi Tutorial Online
      13 Januari, 2019
      Profil: https://www.blogger.com/profile/04152661055432787556
      ow...padahal template buatan mas sugeng.id
  • Bachrul Uluum
    02 Desember, 2018
    Profil: https://www.blogger.com/profile/11414951743210637729
    biar ada dua iklan atau lebih gimana ya mbak?
    • Igniel
      02 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pake ini.
      https://www.igniel.com/2018/11/multiple-iklan-dalam-post.html
    • Unknown
      04 Februari, 2020
      Profil: https://www.blogger.com/profile/07002527289365108449
      404 page not available
  • defantri.com
    13 November, 2018
    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 November, 2018
      Profil: https://www.blogger.com/profile/05409057447679540831
      gak bakal di kasi kalo manggilnya mas... hahaha
    • Who?
      27 Desember, 2018
      Profil: https://www.blogger.com/profile/16729981113419204321
      Mas njirr
  • Manusia Biasa
    13 November, 2018
    Profil: https://www.blogger.com/profile/12579090126784004463
    Nyimak dulu min, belum pernah daftar adsense, di bookmark dulu yaa.. thank you min
  • Mas Trigus
    13 November, 2018
    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 November, 2018
    artikelnya bagus gan saya perlu belajar di blog ini