Membuat iklan scrol transparan/parallax di bawah judul pada blog amp

- 9:09 AM
jika sobat pernah melihat situs atau membaca situs media online di facebook atau pada situs online lainya,pasti anda pernah menemui di mana dalam situs tersebut terdapat iklan yang melayang di bawah judul dan ketika kita scrool ke bawah iklan tersebut seperti ikut berjalan,yah iklan tersebut sering di sebut iklan paralax/atau karpet terbang (flying carpet).
Nah kali ini kita akan membahasa cara membuat iklan tersebut pada blog yang valid amp.
artikel ini saya kutip dari blog Kompiajaib milik mas adhy suryadhi.
dan saya sudah memperatekanya dan berhasil menerapkanya pada blog amp saya lainya,jika sobat ingin melihatnya silahkan tekan tombol demo di bawah ini:


Nah jika sobat tertarik dan ingin menerapkan pada blog amp sobat silahkan ikuti langkah-langkahnya seperti di bawah ini.
Silahkan cari kode </head> dan letakan kode js amp fx-flying-carpet  di bawah ini tepat di atas 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>

jika sudah,silahkan sobat cari kode di bawah ini :

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

biasanya kode tersebut terletak di atas kode <data:post.body/> silahkan coba satu-satu sampai bisa.

jika sudah ketemu,silahkan letak kode di bawah ini tepat di atas 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='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>

isi data ad client dan data ad slot dengan data unit iklan adsense anda.

jangan lupa untuk menambahkan CSS pada style amp-coustom di bawah ini pada template sobat:


.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 template sobat menggunakan sticky header silahkan sisipkan css di bawah ini pada kode di atas :
.above_post amp-ad {
  margin-top: 60px
}

kemudian simpan,dan lihat hasilnya.
jika sobat pernah melihat situs atau membaca situs media online di facebook atau pada situs online lainya,pasti anda pernah menemui di mana dalam situs tersebut terdapat iklan yang melayang di bawah judul dan ketika kita scrool ke bawah iklan tersebut seperti ikut berjalan,yah iklan tersebut sering di sebut iklan paralax/atau karpet terbang (flying carpet).
Nah kali ini kita akan membahasa cara membuat iklan tersebut pada blog yang valid amp.
artikel ini saya kutip dari blog Kompiajaib milik mas adhy suryadhi.
dan saya sudah memperatekanya dan berhasil menerapkanya pada blog amp saya lainya,jika sobat ingin melihatnya silahkan tekan tombol demo di bawah ini:


Nah jika sobat tertarik dan ingin menerapkan pada blog amp sobat silahkan ikuti langkah-langkahnya seperti di bawah ini.
Silahkan cari kode </head> dan letakan kode js amp fx-flying-carpet  di bawah ini tepat di atas 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>

jika sudah,silahkan sobat cari kode di bawah ini :

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

biasanya kode tersebut terletak di atas kode <data:post.body/> silahkan coba satu-satu sampai bisa.

jika sudah ketemu,silahkan letak kode di bawah ini tepat di atas 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='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
 </amp-ad>
</amp-fx-flying-carpet>
  </div>
</b:if>

isi data ad client dan data ad slot dengan data unit iklan adsense anda.

jangan lupa untuk menambahkan CSS pada style amp-coustom di bawah ini pada template sobat:


.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 template sobat menggunakan sticky header silahkan sisipkan css di bawah ini pada kode di atas :
.above_post amp-ad {
  margin-top: 60px
}

kemudian simpan,dan lihat hasilnya.