Cara Membuat Iklan Parallax di Blog Valid AMP

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Iklan Parallax di Blog Valid AMP, ketika kamu melihat sebuah blog yang memiliki iklan didalam artikel seperti halnya ketika kamu scroll iklan tersebut ikut berjalan. Iklan tersebut banyak ditemui di blog berita contohnya Tribunnews.

Iklan tersebut menggunakan teknik dimana objek yang berada dibawah latar belakang bergerak lebih lambat dibandingkan dengan objek iklan yang berada di latar depan artikel sehingga ketika discroll seperti iklan tidak bergerak. Untuk iklan ini kita memberi contoh di blog AMP yang menggunakan amp-fx-flying-carpet untuk tutorialnya silahkan simak berikut ini.

Cara Membuat Iklan Parallax di Blog Valid AMP

1. Silahkan kamu login ke blogger.com kamu dengan menggunakan akun Gmail.
2. Masuk ke menu Tema > klik Edit HTML
3. Selanjutnya, cari kode berikut ini </head> dan paste tepat DIATAS kode tersebut.

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

4. Berikutnya cari kode seperti dibawah ini.

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

Kenapa saya beri tanda tiga titik? Dikarenakan setiap template memiliki kode yang berbeda-beda, tetapi carilah kode yang sangat mirip dengan kode diatas.

5.  Kalau sudah ketemu kode diatas silahkan kamu paste kode dibawah ini tepat DIATAS kode tersebut.

<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='xxxxxxxxxxxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>

6. Jangan lupa kamu ganti ad client dan slot dengan id iklan adsense milik kamu, dan silahkan kamu letakkan kode css dibawah ini tepat DIBAWAH kode <style amp-custom='amp-custom'>

.above_post {
  padding-top: 8px;
  width: 300px;
  margin: 0 20px 5px 0;
  display: inline;
  float: left
}
.above_post amp-ad {
  margin-top: 60px
}
@media screen and (max-width:414px) {
  .above_post {
    padding-top: 10px;
    width: 100%;
    height: auto;
    margin: 0 0 10px;
    display: block;
    float: none
  }
}

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Iklan Parallax di Blog Valid AMP, apabila kamu memiliki pertanyaan atau masalah seputar blogger silahkan komen di kolom komentar dibawah artikel ini.