Membuat Unit Iklan Adsense Parallax Di Blog AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 3/08/2017

Mungkin Anda pernah melihat iklan adsense jenis parallax yang saya maksud (bukan parallax sebenarnya sih hehehe). 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.

Nah, hal ini (iklan parallax yang saya maksud) dapat kita buat juga pada blog AMP HTML dengan memanfaatkan amp-fx-flying-carpet untuk membuat efek parallax pada AMP HTML.

Sebagai demonya, silahkan lihat iklan di pojok kiri atas postingan ini.

Nah jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Namun harus diperhatikan, pastikan unit iklan ini berada di bawah viewport/jendela bukaan pertama terlihat agar amp-fx-flying-carpet bekerja.

Silahkan simpan js amp-fx-flying-carpet ini 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>

Kemudian copy kode HTML di bawah ini

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

Dan simpan di atas kode berikut:

<div class='post-body entry-content' ..........

Kemudian tambahkan CSS 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

  }

}

Jika blog Anda menggunakan sticky header, silahkan tambahkan css berikut agar iklannya tidak terpotong sticky header.

.above_post amp-ad {

  margin-top: 60px

}

60px silahkan sesuaikan dengan tinggi sticky header.

Selesai....

Referensi:
https://ampbyexample.com/components/amp-fx-flying-carpet/