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

44 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • 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>
  • Tehnosia Web
    5/7/22
    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
  • Tehnosia Web
    3/7/22
    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
    2/7/22
    Profil: https://www.blogger.com/profile/00828288525906864174
    Jadi di tampilan desktopnya nanti nggak ada iklannya di tengah postingan ya min?
    • Igniel
      3/7/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya betul. Cuma muncul di mobile.
  • Admin-nim
    20/6/22
    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/6/22
      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/6/22
      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/6/22
      Profil: https://www.blogger.com/profile/12067218760688271067
      Waaah udah bisa, terima kasih banyak mbak
      Btw ditunggu update untuk textrimnya
  • Metro Z
    19/6/22
    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/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Praktekin aja tutor di atas.
    • Metro Z
      20/6/22
      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/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ga ada kak.
  • Faisol abrori
    17/6/22
    Profil: https://www.blogger.com/profile/08229637713318056265
    Mbak, tolong dicekkan dong, kenapa belum bisa tampil di web saya www.faisol.id
    • Igniel
      17/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang kepasang baru CSS. HTML sama JSnya belum ada.
  • Blogger Pemula
    15/6/22
    Profil: https://www.blogger.com/profile/11850441248158675333
    Kakak, buatkan tutorial untuk pengguna wp bisa?
    • Igniel
      17/6/22
      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/6/22
    Profil: https://www.blogger.com/profile/00526825525563935443
    saya jadi ingin mencobanya
    terimakasih atas sharing artikelnya
    semoga bisa menambah atau menaikan dolar
    • Igniel
      17/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama-sama mas. Semoga lancar.
  • AlbinusTejoS
    10/6/22
    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/6/22
      Profil: https://www.blogger.com/profile/14150598596002626212
      kok punya saya dia malah muncul di akhir artikel ya mbak?😂
    • Igniel
      10/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Posisi JSnya salah. Harusnya di atas //]]>
    • AlbinusTejoS
      10/6/22
      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/6/22
      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/6/22
      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/6/22
      Profil: https://www.blogger.com/profile/14150598596002626212
      udah copas ulang mbak, tapi masih sama e... munculnya tetep di akhir artikel... 🤔
    • Igniel
      16/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tulis alamat blognya biar saya cek.
    • AlbinusTejoS
      16/6/22
      Profil: https://www.blogger.com/profile/14150598596002626212
      https://perawatbaik.com
    • Igniel
      16/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      JS jangan disimpan di atas elemen HTML. Simpan di bawahnya, sebelum tag penutup </body>
  • Wildan Wiarta
    6/6/22
    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
      6/6/22
      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
    4/6/22
    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
      4/6/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode AdSense (HTML), CSS parallax, dan JS (buat insert element di tengah) diletakkan terpisah sesuai tempatnya.
    • Oxygenfox
      4/6/22
      Profil: https://www.blogger.com/profile/12233042186470371643
      sukses kak terimakasih ilmu nya🙏 ads nya sya taro di bawah langsung pindah ketengah
  • La Sidin
    31/5/22
    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/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Js di dalam <script>, CSS di dalam <style>
    • Bhimnewspro
      31/5/22
      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 [email protected]
    • Bhimnewspro
      1/6/22
      Profil: https://www.blogger.com/profile/10533159978815473418
      Tq..Love From India ( Karnataka,KGF
      )
    • Bhimnewspro
      1/6/22
      Profil: https://www.blogger.com/profile/10533159978815473418
      Karnataka,KGF
    • La Sidin
      3/6/22
      Profil: https://www.blogger.com/profile/13465444834119799778
      Terimakasih banyak sudah dijawab dan diupdate artikelnya.
  • La Sidin
    31/5/22
    Profil: https://www.blogger.com/profile/13465444834119799778
    Dari dulu penasaran dengan jenis iklan ini. Ternyata sudah dibuat tutorialnya :)
  • Mas uki
    31/5/22
    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/5/22
      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/5/22
      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/5/22
    Profil: https://www.blogger.com/profile/13503791911000091655
    Sangat bermanfaat teh aku erek nyobaan di blog asep blogger media