Toturial Cara Membuat Iklan Adsense Parallax di Blog Non AMP

Cara Membuat Iklan Adsense Parallax di Blog Non AMP - iklan Parallax adalah jenis iklan yang ditampilkan dengan posisi melayang di latar belakang postingan blog, iklan jenis ini akan muncul saat visitor men-scroll halaman isi konten.

Iklan Parallax saat ini lagi banyak di gunakan oleh situs-situs besar, dan memasang iklan parallax di blog merupakan salah satu ide menarik yang perlu di coba.

Berikut ini Tampilan Iklan Parallax dalam konten postingan, jika Anda penasaran silahkan liat Demo nya di Codepen saya.

View on Codepen

Di postingan itu saya mengganti iklannya menggunakan gambar dan silahkan Anda scroll pada halaman tersebut.

Jika Anda ingin mencobanya silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Iklan Adsense Parallax di Blog Non AMP.

Pada menu Edit HTML silahkan letakan kode berikut ini di atas </head> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  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>

Kemudian silahkan Anda cari kode <div class='post-body entry-content' jika di template Anda kode tersebut lebih dari satu silahkan coba satu persatu.

lalu letakan kode berikut ini tepat di atasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
       <-------Tempelkan Kode Iklan AdSense 300x600 di Sini-------->
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Gunakan Iklan Display dengan ukuran Banner 300x600.

Jika ingin efek iklan parallax hanya tampil di mobile saja dan tidak tampil di dekstop, silahkan gunakan CSS berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@media screen and (max-width:640px) {
  .paralax_div {
    position: relative;
 overflow: visible;
 width: 300px;
    height: 600px;
    display: inline-block;
  }
  .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 {
    width: 100%;
    text-align: center;
  }
  .paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:600px;
  }
  .clear {
  clear: both;
  display: block
}
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
  .paralax_div {
    height: 600px;
 width:100%;
  }
}
/*]]>*/
</style>
</b:if>

Klik simpan.

Silahkan buka salah satu halaman postingan Anda setelah beberapa menit kemudian, karena biasanya unit iklan adsense yang baru belum bisa ditampilkan, perlu waktu beberapa menit untuk tampil konsisten.

Baca juga : Cara Mudah Membuat Syntax Highlighter

Nah, mungkin hanya itu saja kali ini tentang Toturial Cara Membuat Iklan Adsense Parallax di Blog Non AMP. Selamat mencoba dan semoga berhasil.