Membuat Iklan Parallax di WordPress Tanpa Plugin

Parallax atau paralaks scrolling web design merupakan suatu teknik khusus dimana sebuah objek yang berada pada latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan sehingga terlihat bahwa objek tersebut tidak bergerak atau diam di tempat ketika sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

ketika Anda menggunakan iklan dengan efek parallax, iklan tersebut akan tetap diam di tempat meski Anda menggesernya atau scroll ke atas maupun ke bawah.

Ini berlaku untuk menampilkan iklan banner maupun iklan adsense ataupun iklan lainya yang memiliki ukuran besar namun hanya di tampilkan sebagian saja. Misalnya, iklan sebenarnya berukuran 300 x 600 piksel namun Anda bisa membuatnya menjadi 300 x 250 piksel saja.

Memasang Iklan Ditengah Artikel WordPress Tanpa Plugin

ketika iklan tersebut di scroll maka akan terlihat mulai dari bawah sampai atas jika Anda menggulirnya atau scroll ke bawah begitu juga sebaliknya. berikut cara membuat iklan Paralax di wordpress tanpa plugin.

Membuat iklan Paralax di WordPress

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;
  }
}

Jika anda ingin menempatkan iklan paralax tersebut muncul di tengah tengah postingan, silahkan Coppy CSS dibawah ini di functions.php

Memasang Lazy Load Adsense di WordPress

/*
 * Insert ads code into post content mahesa.id
 */
add_filter('the_content', 'cw_insert_post_ads');
function cw_insert_post_ads($content){
    if(is_single()){
        //ads code
        $adsCode = '<div><div class="paralax_div" style="center">
  <div>
    <div>
      <div>
KODE IKLAN ADSENSE
    </div>
    </div>
  </div>
<span class="clear"/>
</div></div>';
        
        //insert after / Tempatkan iklan setelah paragraf ke
        $insertAfter = 2;
        
        $closingP = '</p>';
        $contentBlock = explode($closingP, $content);
        foreach($contentBlock as $key => $con){
            if(trim($con)) {
                $contentBlock[$key] .= $closingP;
            }
            if(($key + 1) == $insertAfter){ 
                $contentBlock[$key] .= $adsCode;
            }
        }
        $content = implode('', $contentBlock);
    }
    return $content;    
}

Untuk mengatur letak posisi iklan:

• $adsCode – Insert / masukan ads code (adsense, MGID, dll) ataa lainnya berupa (banner, HTML, dll) yang ingin ada masukan di dalam content.
• $insertAfter– ini merupakan variabel dimana anda dapat menentukan ads / iklan anda tampil pada paragraph ke (sesuai keinginan)

Cukup mudah bukan?. Tapi jika ada yang belum paham bisa di tanyakan di kolom komentar..