Cara Pasang Iklan Parallax di Tengah Post

Iklan Parallax Igniel

Cara memasang iklan Parallax adalah salah satu tutorial yang sering diminta oleh pembaca blog Igniel. Setelah sekian lama, akhirnya saya sempat juga menuliskannya.

Apa Itu Iklan Parallax?

Parallax adalah jenis iklan yang terlihat menempel dan berada di "belakang" halaman post. Posisinya akan tetap diam saat pengunjung melakukan scroll sehingga iklan terkesal muncul dari "dalam". Ini menciptakan ilusi optik yang unik. Itulah sebabnya banyak sekali yang request agar dibuatkan tutorial mengenai cara pasang iklan parallax di blog.

Cara Pasang Iklan Parallax di Tengah Post

Penjelasan saya kurang bagus ya. Pokoknya lihat saja deh di blog ini di bagian tengah, nanti ada iklan parallax muncul di situ.

Iklan parallax blog Igniel hanya muncul di versi mobile. Jadi kalau mau lihat, pastikan untuk membuka blog ini di handphone atau perangkat lain yang berlayar kecil.

Kondisi "Unik" Iklan Parallax

Iklan parallax yang saya buat hanya mengunakan CSS saja. Kelebihannya tentu lebih praktis. Namun karena itu pula ada beberapa kondisi yang harus kamu pahami dalam memasang iklan parallax ini.

  • Idealnya, iklan parallax dipasang di blog yang hanya memiliki satu kolom. Artinya: pada blog yang TIDAK memiliki sidebar. Ini untuk mencegah posisi iklan yang kurang proporsional karena penggunaan CSS saja kurang maksimal dalam menghitung lebar halaman.
  • Jarang banget kan ada blog yang tidak memiliki sidebar? Jadi kondisi di atas bisa juga berarti saat sidebar digeser ke bawah agar kolom postingan tetap lebar. Kondisi ini umum terjadi pada lebar layar di bawah 640px.
  • Dengan kata lain, iklan parallax akan sangat bagus jika dimunculkan hanya di versi mobile saja saat lebar layar lebih kecil dari 640px.

Alasan yang tidak kalah penting karena iklan parallax akan menghasilkan CTR tinggi saat ukurannya penuh menutupi layar. Kalau di versi desktop akan sangat mustahil memenuhi kondisi ini. Masa iya sih ada iklan segede layar laptop.

Kondisi ini gampang terpenuhi saat blog dibuka di layar kecil. Ukuran iklan yang dimaksud umumnya 300 x 600px. Jika dibuka di handphone, iklan ini akan penuh menutupi layar namun dengan kondisi yang manusiawi dan tidak lebay. Google sendiri memiliki jenis iklan yang dioptimasi untuk perangkat mobile, jadi stok iklan berukuran 300 x 600px memang ada dari sananya.

Cara Membuat Iklan Parallax Di Tengah Artikel

Oke, anggap kita sudah sepakat bahwa iklan parallax tengah post ini hanya dimunculkan di versi mobile untuk menghindari kehancuran tampilan. Sekarang barulah kita bisa move on ke langkah berikutnya.

Saya mengkombinasikan iklan parallax dengan script iklan tengah artikel untuk membuat posisinya lebih unik lagi.

1. Buat Unit Iklan Baru

Pertama-tama, saya sarankan untuk buat iklan AdSense baru daripada pakai unit iklan yang sudah ada. Alasannya karena kita akan menggunakan iklan Fixed berukuran 300 x 600px.

Cara Buat Iklan Parallax di Blogspot

Kamu juga bisa buat unit iklan Responsive dengan pilihan dimensi Vertical.

Script Iklan Parallax Tengah Post

2. Kode Iklan Parallax Tengah Artikel

Selanjutnya masuk ke dalam bagian kode. Simpan Javascript berikut DI BAWAH <script> atau <script type='javascript'>. Ini kode untuk menempatkan elemen di tengah post ya, bukan untuk si iklan parallax itu sendiri.

// Parallax Ads In Middle Post by igniel.com
(function() {
  let ads = document.querySelector('.ignielParallax');
    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);
    }
  }
})();

Selanjutnya tambahkan kode CSS iklan parallax berikut DI ATAS </style> atau ]]></b:skin>.

/* Parallax Ads In Middle Post by igniel.com */
.ignielParallax {
  display: block;
  height: 600px;
  margin: 1rem auto;
  position: relative;
}
.prlx1 {
  clip-path: inset(0 0 0 0);
  position: absolute;
  overflow: hidden;
  margin: auto;
}
.prlx2 {
  align-items: flex-start;
  display: flex;
  display: inline-flex;
  justify-content: center;
  position: fixed;
}
.prlx1, .prlx2 {
  bottom: 0;
  left: 0;
  right: 0;
  top: 10px;
}
.prlx1, .parallax ins {
  height: 100%;
  width: 100%;
}

Terakhir, simpan kode HTML berikut DI BAWAH <data:post.body/>. Ganti yang ditandai dengan kode iklan masing-masing.

<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
  <!-- Parallax Ads In Middle Post by igniel.com -->
  <div class='ignielParallax'>
    <div class='prlx1'>
      <div class='prlx2'>
        <!-- Pasang kode iklan di sini -->
      </div>
    </div>
  </div>
</b:if>
Saya menggunakan tag kondisional Blogger isMobileRequest agar elemen yang ditambahkan hanya muncul di versi mobile atau saat blog diakses menggunakan parameter ?m=1

SELESAI! Simpan pengaturan template dan lihat hasilnya. Kamu juga bisa bandingkan dengan demonya di bawah ini.

Kamu bisa lihat bahwa lebar halaman di demonya sengaja dibuat kecil, hanya 480px. Karena tujuan saya memang ingin memunculkan iklan parallax di tengah post ini hanya di halaman mobile saja dengan pertimbangan yang sudah diutarakan di atas.

Apakah Iklan Parallax Aman?

Saya sudah pasang iklan jenis ini lebih dari 2 tahun (mungkin 3 tahun sih) dan aman-aman saja. Tidak ada masalah apapun. Karena pada dasarnya ini hampir sama dengan iklan tengah artikel yang berbentuk vertikal, namun posiinya ada "di dalam lipatan" halaman blog.

Kamu bisa cek artikel Kumpulan Posisi Unik Iklan AdSense untuk mendapatkan variasi lain dalam upaya meningkatkan CTR.

Sekian panduan lengkap untuk membuat iklan parallax di tengah artikel Blogger. Mudah-mudahan tulisan saya bisa sedikit membantu.

Artikel Terkait

65 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>
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Tedi Setiawan
    29 November, 2022
    Profil: https://www.blogger.com/profile/17009809121081460494
    https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6J-sbIa0KWcJBnKmVRETJKw2lwAmHbCazEA&usqp=CAU
    • Tedi Setiawan
      29 November, 2022
      Profil: https://www.blogger.com/profile/17009809121081460494
      mbak tutor dong biar bsa kirim gambar di komentar
    • Igniel
      29 November, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tulis di halaman "Request" biar komennya gak dihapus karena OOT. Komentar ini akan dihapus otomatis dalam 1 minggu.
      https://www.igniel.com/p/request.html
    • Tedi Setiawan
      30 November, 2022
      Profil: https://www.blogger.com/profile/15376728777588444442
      Oke mbak
  • Guru Geografi
    18 September, 2022
    Profil: https://www.blogger.com/profile/02574384075010098754
    mba kalau iklannya blank putih kenapa ya, saya udah parse dan diletakan diantara scriptt 2 iklan tengah artikel sebelumnya
  • Jaman Sekarang
    05 September, 2022
    Profil: https://www.blogger.com/profile/04185739537327715923
    Terimakasih gan tutornya, saya akan mencobanya..
  • Uce Picung
    31 Agustus, 2022
    Profil: https://www.blogger.com/profile/07048763982267763046
    mba aku dah coba pasang, posisi udah tepat di tengah postingan tapi ko nge blank ya gk ada iklannya..ini blog ku ucepicung.blogspot.com minta solusinya ya mba
  • Ogha
    11 Agustus, 2022
    Profil: https://www.blogger.com/profile/09193979433504979881
    Mba mohon petunjuk, iklan nya tampil di bawah footer, tidak di tengah artikel,...mohon bantuan nya mba https://matapenanews.id/
    • Igniel
      03 September, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi karena ini. Silakan buka:
      https://www.igniel.com/2022/05/iklan-parallax-tengah-post.html?sc=1662178257701&m=1#c5411691786420657074
  • Arif
    11 Agustus, 2022
    Profil: https://www.blogger.com/profile/17649440288947574563
    Ini kenapa ya iklannya muncul di akhir artikel?
    • Igniel
      03 September, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi karena ini. Silakan buka:
      https://www.igniel.com/2022/05/iklan-parallax-tengah-post.html?sc=1662178257701&m=1#c5411691786420657074
  • Ardinata
    31 Juli, 2022
    Profil: https://www.blogger.com/profile/04738260186008390782
    kak igniel saya udah ikuti lengkap tutor diatas tapi tidak muncul di blog saya, nama blog saya markautoe.xyz bisa tolong dik cek kan kak salahnya dmna
  • Admin
    28 Juli, 2022
    Profil: https://www.blogger.com/profile/16724423673688982806
    Tlong di cek kak www.jobsbogor.blogspot.com bisa muncul tapi tidak di tengah post tks kak igniel
    • Igniel
      03 September, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi karena ini. Silakan buka:
      https://www.igniel.com/2022/05/iklan-parallax-tengah-post.html?m=1#c2168260144947489859
  • MULIATI
    20 Juli, 2022
    Profil: https://www.blogger.com/profile/13768268083279995975
    Makasih tutorialnya kak...
    Mau nanya, sy udah pasang kodenya sesuai petunjuk di atas, tapi kok iklan adsense paralax di blog saya hanya tampil 50% aja ya, ga full...

    Ini blog saya : www.formatadministrasidesa.com
  • Sedang Belajar Ngeblog
    16 Juli, 2022
    Profil: https://www.blogger.com/profile/02408736944940842606
    Ooh, namanya iklan parallax ya.

    Alhamdulillah udah berhasil.

    Makasih tutorialnya, Mba.
  • Plan
    14 Juli, 2022
    Profil: https://www.blogger.com/profile/15970855050127687590
    kenapa ya kak di template medianui gak bisa di tengah, dia muncul di bawah postingan terus, padahal udah coba pke beberapa vara hasilnya sama bisa di cek kak planterbag.web.id
    • Igniel
      14 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nama class yang dipakai di blog kamu berbeda dengan di tutorial. Solusinya ganti Javascript bagian ini:
      document.querySelectorAll('.post-body br, .post-body p')
      Jadi ini:
      document.querySelectorAll('.postBody br, .postBody p')
    • Plan
      14 Juli, 2022
      Profil: https://www.blogger.com/profile/15970855050127687590
      owh ok kak makasih banyak dah berhasil,, is the best pokoknya
  • Tehnosia Web
    05 Juli, 2022
    Profil: https://www.blogger.com/profile/00979230696501478262
    Saya sudah coba panduan di web ini, dan beberapq kali saya edid sesuai arahan di kolom komentar dari user lain
    Tp iklan paralaxnya juga tetap muncul di bawah artikel. Mohon bantuannya kak
    Blog saya www.tehnosia.com
    • Igniel
      14 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nama class yang dipakai di blog kamu berbeda dengan di tutorial. Solusinya ganti Javascript bagian ini:
      document.querySelectorAll('.post-body br, .post-body p')
      Jadi ini:
      document.querySelectorAll('.post_body br, .post_body p')
  • Tehnosia Web
    03 Juli, 2022
    Profil: https://www.blogger.com/profile/00979230696501478262
    Menurut pengalaman blog igniel penerapan iklannya bagus mana yg ukuran fixed 300x600px atau yg responseve vertical
  • Rio Agustya
    02 Juli, 2022
    Profil: https://www.blogger.com/profile/00828288525906864174
    Jadi di tampilan desktopnya nanti nggak ada iklannya di tengah postingan ya min?
    • Igniel
      03 Juli, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya betul. Cuma muncul di mobile.
  • Admin-nim
    20 Juni, 2022
    Profil: https://www.blogger.com/profile/12067218760688271067
    Mbak saya pakai template textrim, iklannya malah nutupin halaman postnya, bagian mana yang salah ya
    Blog saya klyricsforyou.com
    • Igniel
      22 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya cek karena Javascript-nya ada yang diubah dan penulisannya kurang tepat di bagian let post. Harusnya begini:
      let post = document.querySelectorAll('.post-body br, .post-body p')
      Punya mas begini:
      let post = document.querySelectorAll('post-body entry-content br, post-body entry-content p')
      Perhatikan, tanda titik (.) jadi hilang, padahal itu penting untuk menandakan class. Solusinya ganti aja ke script original seperti tutor di atas.
    • Igniel
      22 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cek juga tag penutup CSS sebelumnya ya. Sepertinya ada penutup kurung kurawal (}) di atas kode CSS parallax.
    • Admin-nim
      22 Juni, 2022
      Profil: https://www.blogger.com/profile/12067218760688271067
      Waaah udah bisa, terima kasih banyak mbak
      Btw ditunggu update untuk textrimnya
  • Metroz.id
    19 Juni, 2022
    Profil: https://www.blogger.com/profile/03988669982011113379
    Kak ajarin saya donk pasang iklan parallax, saya pakai sering gagal Makai nya. Mohon bimbing masih pemula. 🙏
    • Igniel
      19 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Praktekin aja tutor di atas.
    • Metroz.id
      20 Juni, 2022
      Profil: https://www.blogger.com/profile/03988669982011113379
      Sering gagal pun kak, 🙏, udah di Cuba gagal lagi. Boleh tau tutorial di YouTube ada ga ya? 🙏
    • Igniel
      20 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ga ada kak.
  • Faisol abrori
    17 Juni, 2022
    Profil: https://www.blogger.com/profile/08229637713318056265
    Mbak, tolong dicekkan dong, kenapa belum bisa tampil di web saya www.faisol.id
    • Igniel
      17 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang kepasang baru CSS. HTML sama JSnya belum ada.
  • Blogger Pemula
    15 Juni, 2022
    Profil: https://www.blogger.com/profile/11850441248158675333
    Kakak, buatkan tutorial untuk pengguna wp bisa?
    • Igniel
      17 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tinggal simpan di tempatnya aja kak. Cari tahu dulu CSS, HTML, dan JS disimpan di mana. Tinggal copy deh kode di atas (tapi tag XML Bloggernya jangan dibawa).
  • Djangkaru Bumi
    10 Juni, 2022
    Profil: https://www.blogger.com/profile/00526825525563935443
    saya jadi ingin mencobanya
    terimakasih atas sharing artikelnya
    semoga bisa menambah atau menaikan dolar
    • Igniel
      17 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama-sama mas. Semoga lancar.
  • AlbinusTejoS
    10 Juni, 2022
    Profil: https://www.blogger.com/profile/14150598596002626212
    Mbak, yang javascriptnya ini narohnya di dalam yg ada CDATA itu ya?
    Peletakannya gini bukan?


    <script>
    // <![CDATA[
    bla..bla...bla...
    //]]>

    (kode taroh disini)
    </script>


    begitu ya mbak?
    • AlbinusTejoS
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/14150598596002626212
      kok punya saya dia malah muncul di akhir artikel ya mbak?😂
    • Igniel
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Posisi JSnya salah. Harusnya di atas //]]>
    • AlbinusTejoS
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/14150598596002626212
      skrg JS sudah saya taroh di atas //]]>
      tapi masih sama mbak... dia muncul di akhir artikel...😅
      apa lg yg salah ya?
    • AlbinusTejoS
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/14150598596002626212
      di bawah /script ada kode noscript gini mbak:
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDaC5ktTc_YtygQFJo4-D-G99okjvyh1sk4r23NgDCxl8LheZHMZHHn5eQY2SgTZoo_JbOCjoOHul95FmGqyQ9CWE2DZ91Ys0dgtKrjrNtHi7INik3jyH0PGmokbuP5A6yWJ4tDR6pci_KKhiJfmSGjwHXG1Q55sDofZ8QE8OApxgBzAdz8WpHiuz/s1600/noscript%20perawatbaik.jpg
    • Igniel
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba ulang copas lagi kodenya dari artikel ini. Kalau yang mas udah keburu kena parse.

      Yang noscript gak apa-apa, gak berpengaruh.
    • AlbinusTejoS
      10 Juni, 2022
      Profil: https://www.blogger.com/profile/14150598596002626212
      udah copas ulang mbak, tapi masih sama e... munculnya tetep di akhir artikel... 🤔
    • Igniel
      16 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tulis alamat blognya biar saya cek.
    • AlbinusTejoS
      16 Juni, 2022
      Profil: https://www.blogger.com/profile/14150598596002626212
      https://perawatbaik.com
    • Igniel
      16 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      JS jangan disimpan di atas elemen HTML. Simpan di bawahnya, sebelum tag penutup </body>
  • Wildan Wiarta
    06 Juni, 2022
    Profil: https://www.blogger.com/profile/17843052679929553229
    Saya pakai template Median UI tapi iklannya munculnya malah iklannya menutupi seluruh halaman mbak, salah dimana kira2 ya?
    • Igniel
      06 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cek dulu di tema yang dimaksud pakai nama class apa untuk area postingan. Di contoh saya pakai .post-body karena umumnya tema Blogger pakai itu.

      Kalau beda, ganti aja di bagian JSnya. Kode ini:
      document.querySelectorAll('.post-body br, .post-body p')
      Ganti bagian .post-body pakai nama class yang dipakai di tema.
  • Oxygenfox
    04 Juni, 2022
    Profil: https://www.blogger.com/profile/12233042186470371643
    Maaf oot gk pake blogger, mau tanya berarti kode adsense dan paralax nya di letaka terpisah ya ? nanti code js nya yang nyari element css nya otomatis meletakan di tengah2 posts ?
    • Igniel
      04 Juni, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode AdSense (HTML), CSS parallax, dan JS (buat insert element di tengah) diletakkan terpisah sesuai tempatnya.
    • Oxygenfox
      04 Juni, 2022
      Profil: https://www.blogger.com/profile/12233042186470371643
      sukses kak terimakasih ilmu nya🙏 ads nya sya taro di bawah langsung pindah ketengah
  • La Sidin
    31 Mei, 2022
    Profil: https://www.blogger.com/profile/13465444834119799778
    Maaf kak mau nanya. Kode javascript dan css nya sebaiknya ditaruh di mana ya? Saya barusan coba tapi malah kodenya muncul di halaman blog wkwkw. Semoga dijawab.
    • Igniel
      31 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Js di dalam <script>, CSS di dalam <style>
    • Bhimnewspro
      31 Mei, 2022
      Profil: https://www.blogger.com/profile/10533159978815473418
      i Dont understanding this Im Try Many More Times But Im fail Plz Help Me Plz How to Place Code...??? Any Screen Short Send Me on bhimudore00143@gamil.com
    • Bhimnewspro
      01 Juni, 2022
      Profil: https://www.blogger.com/profile/10533159978815473418
      Tq..Love From India ( Karnataka,KGF
      )
    • Bhimnewspro
      01 Juni, 2022
      Profil: https://www.blogger.com/profile/10533159978815473418
      Karnataka,KGF
    • La Sidin
      03 Juni, 2022
      Profil: https://www.blogger.com/profile/13465444834119799778
      Terimakasih banyak sudah dijawab dan diupdate artikelnya.
  • La Sidin
    31 Mei, 2022
    Profil: https://www.blogger.com/profile/13465444834119799778
    Dari dulu penasaran dengan jenis iklan ini. Ternyata sudah dibuat tutorialnya :)
  • S uki
    31 Mei, 2022
    Profil: https://www.blogger.com/profile/17216426145973668268
    Apakah menurut mba hanya ukuran 300x600 yang ideal itu ?
    Kalau misal saya menerapkan 300x400 gimana ya dan apakah iklan ukuran ini banyak yang akan tampil /tidak ya
    • Igniel
      31 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iklan ukuran 300 x 400 banyak juga. Tapi saya lebih milih height 600px untuk memanfaatkan ruang. Smartphone kan bentuknya memanjang.
    • Igniel
      31 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau bingung memilih, buat aja unit iklan responsive biar ukurannya otomatis mengikuti layar. Dan pastikan pilih dimensi vertikal.
  • Asep Rohimat
    30 Mei, 2022
    Profil: https://www.blogger.com/profile/13503791911000091655
    Sangat bermanfaat teh aku erek nyobaan di blog asep blogger media