Membuat Iklan Parallax di Blog AMP

Membuat Iklan Parallax di Blog AMP Sebenarnya Iklan parallax itu merupakan iklan baru yang mana Parallax atau biasa disebut Parallaks Scrolling Web Design ialah suatu teknik  khusus dimana sebuah objek yang berada dibawah latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada dilatar depan sehingga terlihat objek tersebut tidak bergerak atau bisa dikatakan diam ditempat saat sebuah halaman digulir kebawah maupun keatas.

Iklan parallax ini dapat kita buat juga pada blog AMP HTML dengan memanfaatkan amp-fx-flying-carpet untuk membuat efek parallax pada AMP HTML.

Agar amp-fx-flying-carpet bekerja, pastikan unit iklan ini berada di bawah viewport/jendela bukaan pertama terlihat. Untuk cara pemasanganya ikuti langkah di bawah ini:

Membuat Iklan Parallax di 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