Skip to main content
KOMPI AJAIB

follow us

Membuat Unit Iklan Adsense Parallax Di Blog AMP

Baca juga:

Mungkin Anda pernah melihat iklan adsense jenis parallax yang saya maksud (bukan parallax sebenarnya sih hehehe). Biasanya iklan jenis ini akan menggunakan iklan tinggi, sementara area untuk melihat iklannya berupa kotak dengan ukuran 300x250.

Dengan begitu, iklan tinggi (160x600, 180x600, 300x600) dapat ditampilkan tanpa menghabiskan area di mana iklan diletakan dengan ukuran 300x250.

Nah, hal ini (iklan parallax yang saya maksud) dapat kita buat juga pada blog AMP HTML dengan memanfaatkan amp-fx-flying-carpet untuk membuat efek parallax pada AMP HTML.

Sebagai demonya, silahkan lihat iklan di pojok kiri atas postingan ini.

Nah jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Namun harus diperhatikan, pastikan unit iklan ini berada di bawah viewport/jendela bukaan pertama terlihat agar amp-fx-flying-carpet bekerja.

Silahkan simpan js amp-fx-flying-carpet ini 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>

Kemudian copy kode HTML di bawah ini


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

Dan simpan di atas kode berikut:


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

Kemudian tambahkan CSS 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
  }
}

Jika blog Anda menggunakan sticky header, silahkan tambahkan css berikut agar iklannya tidak terpotong sticky header.


.above_post amp-ad {
  margin-top: 60px
}

60px silahkan sesuaikan dengan tinggi sticky header.

Selesai....

Referensi:
https://ampbyexample.com/components/amp-fx-flying-carpet/

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar