Cara Membuat Iklan Parallax WordPress

Tutorial kali ini mengenai Cara Membuat Iklan Parallax WordPress. Kami membuat postingan tentang ini karena mungkin ada yang mencari informasi tentang cara membuat iklan parallax adsense di wordPress dengan mudah di blog.

Tutorial cara memasang iklan parallax bisa kalian pasang di blog wordPress mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang iklan parallax di wordPress hanya perlu copy paste dari postingan ini. Tanpa basa basi berikut tutorial cara memasang iklan parallax di wordPress dengan mudah.

Cara Memasang Iklan Parallax

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.

Terimakasih sudah membaca artikel kami tentang Cara Membuat Iklan Parallax Adsense di WordPress Dengan Mudah.