Cara Menambahkan Iklan Parallax Di Blogger

Apa Itu Iklan Parallax?

Iklan Parallax adalah Iklan yang Tampil Di Dalam Postingan saat Halaman Di Scroll dan biasanya Berbentuk Seperti Di Background Postingan.

Postingan Terkait

Lihat Demo

Cara Menambahkan Iklan Parallax Di Blogger

1. Buka Dashboard Blogger.

2. Pada Dashboard Blogger, Klik  Tema.

3. Kemudian Klik  Dan Klik Edit HTML.

4. Cari Bagian /*]]>*/</style> atau ]]></b:skin> Dan Tempel Kode Berikut Tepat Diatasnya Atau Tempel Kode berikut Dibawah /* --- Your Custom CSS goes here --- */.

.parallaxAd {
  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%;
}

5. Cari Bagian </body> Dan Letakkan Kode berikut Tepat Diatasnya.

<script>/*<![CDATA[*/
(function() {
  let ads = document.querySelector('.parallaxAd');
    if (ads) {
    let post = document.querySelectorAll('.post-body br, .post-body p'), x = parseInt(post.length / 6); // sesuaikan posisi
    if (post[x].nodeName == 'P') {
      post[x].parentNode.insertBefore(ads, post[x]);
    }
    else {
      post[x].parentNode.insertBefore(ads, post[x].nextSibling);
    }
  }
})();
/*]]>*/</script>

6. Kemudian Tambahkan Kode Berikut Dibawah <data:post.body/>.

<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
  <div class='parallaxAd'>
    <div class='prlx1'>
      <div class='prlx2'>
        <!-- Tempelkan Kode Iklan Di Sini -->
      </div>
    </div>
  </div>
</b:if>

Kode Diatas Akan Memunculkan Iklan Parallax Hanya Di Perangkat Mobile (Handphone), Jika Anda Ingin Menambilkan Iklannya Disemua Perangkat Maka Gunakan Kode Dibawah.

<b:if cond='data:view.isPost and !data:view.isPreview'>
  <div class='parallaxAd'>
    <div class='prlx1'>
      <div class='prlx2'>
        <!-- Tempelkan Kode Iklan Di Sini -->
      </div>
    </div>
  </div>
</b:if>

7. Lalu Klik  Simpan, Selesai.

Buka untuk Melanjutkan

Pergi ke Tautan