Cara Membuat Iklan Parallax Adsense di WordPress Dengan Mudah

Cara Pasang Iklan Parallax Adsense di WordPress | Pada kesempatan kali ini saya akan membahas mengenai cara memasang iklan parallax adsense di dalam post WordPress. Pasti pernah melihat iklan disalam postingan artikel yang terlbelah kan. Pada saat saya membagikan tutorial ini saya menggunakan Jannah Theme sebagai tema yang saya gunakan.

Sebelum terlalu jauh membahas, sebaiknya kamu perlu mengetahui apa yang dimaksud dengan iklan parallax. Untuk pengertiannya bisa kamu simak dibawah ini.

Apa itu Iklan Parallax?

Iklan Parallax merupakan iklan yang tampil atau muncul didalam postingan (seperti background) sebuah konten atau artikel yang terbelah.

Bagaimana Cara Memasang Iklan Parallax di WordPress atau Blog?

Untuk cara pemasangannya bisa kamu ikuti beberapa langkah dibawah ini. Kamu harus mengikuti langkah berikut dengan teliti dan cermat agar tidak ada langkah yang terlewat sehingga hasilnya akan sempurna 🙂

Pertama kamu harus copy kode CSS dibawah ini kemudian paste didalam Menu Custom CSS di Panel Theme.

 .paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 99;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 650px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:650px;
  }
}

Kedua copy kode CSS dibawah ini kemudian paste didalam Menu Advertisment di Panel Theme.

<div class="paralax_div" style="center">
  <div>
    <div>
      <div>

KODE IKLAN ADSENSE

    </div>
    </div>
  </div>
<span class="clear"/>
</div>

Jangan lupa ganti KODE IKLAN ADSENSE dengan kode dibawah ini.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- #Adsense Parallax MASFENDI -->
<ins class="adsbygoogle"
style="display:inline-block;width:360px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ganti kode data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” dan data-ad-slot=”XXXXXXXXXX” sesuai dengan kode Adsense yang kamu miliki.

Jika semua langkah sudah selesai dengan baik, silakan kamu cek tampilan iklan parallax adsense ini pada tampilan mobile. Apakah pemasangan berjalan dengan baik atau masih ada kekeliruan yang terjadi. Jika masih bingung bisa tinggalkan komentar dibawah.