Cara memasang iklan parallax pada blog AMP Dan Non AMP

Cara buat iklan parallax background - Sebenarnya iklan parallax ini banyak diterapkan ditemplate AMP atau khusus pengguna Template blog AMP, namun dikarnakan masih banyak blog yang belum menggunakan ataupun menerapkan AMP pada blognya dan ingin mencoba menerapkanya juga pada blog non amp jadi Pada kesempatan kali ini saya akan mencoba untuk membahas tentang cara membuat iklan parallax di blogger baik pada template AMP Maupun Template Non AMP.

Cara memasang iklan parallax pada blog

Iklan parallax ini bentuknya seperti background, jadi tidak sedikit juga yang menyebutnya sebagai iklan background, iklan menempel di background, ataupun iklan background yang muncul saat di scroll. Menurut saya Dengan memasang iklan parallax di blog dan tentunya di tambah dengan penempatan yang tepat itu selain dapat menambah CTR, blog juga akan terlihat semakin keren, dan profesional. Biasanya iklan jenis ini akan menggunakan iklan tinggi, sementara area untuk melihat iklannya berupa kotak dengan ukuran 300x250. Dengan begitu, iklan tinggi (160x600, 180x600, 300x600) dapat ditampilkan tanpa menghabiskan area di mana iklan diletakan dengan ukuran 300x250. Cara ini saya dapatkan di berbagai sumber seperti mahesa, kompi ajaib dn sayapun menerapkan pada blog ini, untuk contohnya sobat bisa lihat di awal postingan ini ataupun gambar dibawah ini

Lalu bagai mana cara membuat iklan parallax?

Nah, untuk sobat yang penasaran tentang cara membuat dan menerapkan iklan parallax di blog AMP Ataupun Non AMP, simak aja ulasanya di bawah ini.

# 1. Memasang iklan Parallax pada Blog AMP

Buka Dasboard Blogger dan pilih Edit HTML
Letakkan js amp-fx-flying-carpet di atas kode </head>

 <script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

Copy dan letakkan kode HTML berikut di atas <div class='post-body entry-content'

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='above_post'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>

Tambahkan CSS di bawah ini pada style amp-custom untuk halaman postingan

 .above_post {
  padding-top: 8px;
  width: 300px;
  margin: 0 20px 5px 0;
  display: inline;
  float: left
}

@media screen and (max-width:414px) {
  .above_post {
    padding-top: 10px;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    display: block;
    float: none
  }
}

Simpan Themplat dan silahkan lihat hasilnya

# 2. Memasang iklan Parallax pada Blog Non AMP

Seperti biasa masuk ke Dasboard Blogger dan pilih Edit HTML
Letakkan kode di bawah ini di atas kode </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>

Simpan kode di bawah ini tepat di atas kode <div class='post-body entry-content' ........

<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/AVvXsEiyTJ2Cju3d5HvXP2VmsYyCc62dd1aWqFrORVXsTzQviPfYsRKPAak_RS9rgQcs4fS9Xz739eLJKfRmK5Y_vhvrYCWDoBXEcasuBoFiypvG-TgwrtRWieS_vV6qoy46AZbb45TnGzRX17kk/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Untuk iklan banner (dengan tinggi 600px dan lebar 300px), silahkan ganti url gambar pada kode di atas.

Untuk iklan dengan iframe atau adsense (iklan 300x600), silahkan ganti tag <img> di atas dengan kode iklan sobat

Cara memasang iklan parallax pada blog AMP Dan Non AMP