Cara Memasang dan Membuat Iklan Parallax ditengah Postingan

Table of Contents

Artikel kali ini saya akan membahas salah satu tutorial yang sering dibahas di blog-blog tutorial blogging bagaimana cara memasang dan membuat iklan parallaks ditengah postingan hanya dengan menggunakan CSS by igniel.

Apa itu Iklan Paralaks

Iklan paralaks merupakan jenis iklan yang terlihat menempel dan berada di belakang halaman postingan atau artikel. Posisinya akan tetap stasioner saat pengunjung melakukan scroll sehingga iklan tampak muncul dari dalam.

Iklan parallax tidak disediakan oleh Google AdSense, sehingga kita harus membuatnya sendiri atau sedemikian rupa agar iklan tersebut berjalan dan berfungsi dengan baik seperti iklan lainnya.

Memasang Iklan Paralaks di Tengah Artikel

Berikut cara dan langkah-langkah membuat dan memasang iklan paralaks di tengah postingan atau artikel:

1. Buat unit iklan baru

• Buat unit iklan responsif dengan pilihan dimensi vertikal
• Buat unit iklan berukuran 300x600
• Parse kode iklannya terlebih dahulu

2. Kode iklan paralaks di tengah artikel

Berikutnya. Simpan Javascript berikut tepat di bawah kode <script> atau <script type='javascript'>. Kode ini untuk penempatannya di tengah postingan, bukan untuk iklan paralaks 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 paralaks berikut tepat 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/>. Ubah tag dengan kode iklan Anda.

<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'>
        <!-- kode iklan di sini -->
      </div>
    </div>
  </div>
</b:if>

Selesai! Simpan pengaturan template. Iklan paralaks di tengah postingan atau artikel ini hanya muncul di halaman seluler.