Pada saat kamu berkunjung ke sebuah blog mungkin kamu pernah melihat iklan yang berada di balik artikel, itu sebenarnya adalah sebuah iklan baru yang disebut iklan parallax.Iklan parallax menggunakan teknik khusus dimana objek yang berada dibawah latar belakang (iklan) bergerak lebih lambat dibandingkan dengan objek yang berada dilatar depan (artikel kita) sehingga terlihat objek tersebut tidak bergerak meskipun kita gulir ke bawah maupun kembali ke atas atau yang disebut Parallaks Scrolling Web Design.
Karena kita akan memasang iklan parallax pada blog AMP, jadi harus menggunakan amp-fx-flying-carpet, langsung saja simak tutorial membuat iklan parallax di blog valid AMP sebagai berikut:
Cara Membuat Iklan Parallax di Blog
1. Buka dashboard Blogger kamu.2. Pilih menu Tema > Edit HTML.
3. Letakkan kode di bawah, tepat 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>4. Setelah meletakkan kode di atas, sekarang cari kode <div class='post-body entry-content' ...>.
Kenapa saya beri tiga titik? Sebab setiap template memiliki kode yang berbeda-beda, tetapi carilah kode yang mirip dengan kode di atas.
5. Setelah ketemu kode yang mirip, letakkan kode di bawah, tepat di atas kode <div class='post-body entry-content' ...>.
<b:if cond='data:blog.pageType == "item"'>
<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>
Jangan lupa ganti ad client dan ad slot dengan kode iklan adsense yang ingin kamu pasang.
6. Kemudian, letakkan kode berikut, tepat di bawah kode <style amp-custom='amp-custom'>.
.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
}
}7. Jika blog kamu menggunakan menu sticky header, silakan kamu tambahkan CSS berikut supaya iklan tidak terpotong dengan menu sticky header.
.above_post amp-ad {
margin-top: 60px
}
Sesuaikan 60px dengan tinggi menu sticky header blog kamu.
8. Simpan tema dan selesai.
