Tutorial Cara Pasang Iklan AdSense Parallax Blog Non-AMP

Iklan Parallax AdSense merupakan jenis iklan yang ditampilkan melayang di latar belakang Konten Postingan. Iklan Parallax akan muncul ketika pembaca pengguna Mobile Android sudah menscrol halaman setengah dari keseluruhan konten, pada umumnya iklan parallax tampil dengan ukuran banner persegi panjang vertikal ukuran 300px x 600px.

Agar anda tidak penasaran dengan tampilan Iklan Prallax, berikut ini adalah tampilan Iklan Parallax dalam konten postingan Igniel.com platform Blogger dengan template Non-AMP.





Cara Pasang Iklan AdSense Parallax Blogger Non-AMP

1. Buka Dasboard Blogger, Pilih menu Tema kemudian pilih EDIT HTML

2. Cari dan temukan kode </head> tempelkan kode berikut ini di atasnya. Gunakan fitur pencarian dengan menekan tombol CTRL + F

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

3. Cari dan temukan kode<div class='post-body entry-content'... tempelkan Source Kode Iklan Parallax berikut ini di atasnya. Biasanya kode ini terdapat lebih dari satu, silahkan lakukan uji coba penempatan.

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

4. Buat Unit Iklan Display di Dasboard AdSense anda dengan ukuran banner 300px x 600px atau jenis iklan persegi panjang verital responsive. Kemudian tempelkan kode iklan pada area penempatan source kode iklan AdSense.

5. Klick Simpan Tema untuk menerapkan

6. Buka salah satu halaman postingan anda setelah beberapa menit kedepan, karena biasanya unit iklan adsense yang baru tidak langsung bisa ditampilkan butuh waktu beberapa menit dihitung dari mulai pembuatan unit iklan.

Demikianlah Tutorial Cara Membuat dan Memasang Iklan AdSense Parallax di Blog dengan Template Non-AMP. Dengan pemasangan jenis iklan ini yang jarang diterapkan oleh blogger pada umumnya diharapkan dapat meningkatkan penghasilan klick iklan AdSense.