Cara Membuat Iklan Paralax dibawah artikel untuk blog non AMP di Tengah layar HP dan Komputer

Pada kesempatan ini kita akan mencoba memasang iklan parallax pada blog.
Apa itu  Iklan Parallax? 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.

CARA MEMBUAT IKLAN PARALLAX

1. Buka blogg anda > Tema > edit HTML cari kode </head>, untuk memudahkan dalam mencarinya tekan Ctrl + F pada keyboard Laptop atau Komputer anda.

2. Paste kan script dibawah ini tepat di atas kode </head> tadi. 
 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: vi
 sible;
  width: 300px;
  height: 250px;
  margin: 0 auto 20px;
  display: block;
  z-index: 9999;
}
.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;
  background: #ddd;
}
.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: 250px;
    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:600px;
  }
}
/*]]>*/
</style>
</b:if>

3. Cari kode dibawah ini

<data:post.body/>

4. Paste kan kode dibawah ini tepat dibawah kode no 3 tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="paralax_div">

  <div>

    <div>

      <div>

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRoFQkZd1KAlIWYhKgeIu3evmg6J3kPF2A4yMtRbMqm-B_fCZHlIfXXmM3nHSH0hSv5O8ouzxMpgRm7HzJIkUFEH-rYSA7fIuX5gPVHBkgF5suUrYpRPiNPgyWJTptWWsP_AvzmV0VY2Z/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />

      </div>

    </div>

  </div>

<span class="clear"/>

</div>

</b:if>

5. Ganti kode yang diblok warna kuning diatas dengan script iklan adsense anda dengan jenis spanduk tegak berukuran 600 x 300 px.

6. Save template dan lihat hasilnya. 

Berikut demo tampilan iklan Parallax

Demo

Sumber artikel: KOMPI AJAIB

                        CARA MANUAL

                        MASIHTERJAGA