Cara Membuat Iklan Parallax Valid AMP di Blogger

Pada kesempatan kali ini saya akan membahas Cara Membuat Iklan Parallax Valid AMP di Blogger. Disaat kalian berkunjung ke sebuah situs web mungkin kalian pernah melihat iklan yang berada di balik artikel, itu sebener adalah sebuah iklan baru yang sering kita sebut iklan Parallax.

Iklan parallax sendiri menggunakan teknik khusus dimana objek yang berada dibawah latar belakang yang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan atau disebut artikel.

Sehingga terlihat objek tersebut terus bergerak meskipun kita scroll ke bawah ataupun scroll keatas yang disebut Parallaxs Scrolling Web Design.

Dikarenakan kita akan memasangnya iklan parallax pada AMP blog, Jadi harus menggunakan amp-fx-flying-carpet, Langsung saja simak Tutorial Membuat Iklan Parallax Valid AMP di blog sebagai berikut.

Cara Membuat Iklan Parallax Valid AMP di Blogger:

1. Masuk ke akun Blogger.

2. Pilih menu Tema > Edit HTML.

3. Letakkan kode dibawah ini tepat diatas kode </head> atau /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. Selanjutnya cari kode <div class='post-body entry-content' ...>

NB. Kenapa saya memberikan titik tiga? Karena setiap template memiliki kode yang berbeda-beda. carilah kode yang mirip dengan kode diatas tadi.

5. setelah menemukan kode yang kalian cari. Selanjutnya letakkan kode dibawah ini, tepat diatas kode <div class='post-body entry-content' ...> yang kalian cari tadi.

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

Jangan lupa ganti yang bertanda merah dengan kode iklan yang kalian ingin pasang

6. Selanjutnya letakkan kode 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

}

@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 kalian menggunakan menu sticky header, silahkan kalian tambahkan CSS berikut supaya iklan tidak terpotong dengan menu sticky header.

.above_post amp-ad {

  margin-top: 60px

}

Sesuaikan tanda merah dengan tinggi menu sticky header blog kalian.

8. Simpan dan selamat mencoba.