Membuat Unit Iklan Adsense Parallax Di Blog Amp

Mungkin Anda pernah melihat iklan adsense jenis parallax yang aku maksud (bukan parallax bahu-membahu sih hehehe). Biasanya iklan jenis ini akan memakai iklan tinggi, sementara area untuk melihat iklannya berupa kotak dengan ukuran 300x250.

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

Nah, hal ini (iklan parallax yang aku maksud) sanggup kita buat juga pada blog AMP HTML dengan memanfaatkan amp-fx-flying-carpet untuk menciptakan pengaruh parallax pada AMP HTML.

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

Nah jikalau 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 supaya amp-fx-flying-carpet bekerja.

Silahkan simpan js amp-fx-flying-carpet ini di atas aba-aba </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 aba-aba 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 aba-aba 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 memakai sticky header, silahkan tambahkan css berikut supaya 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/
Sumber https://www.kompiajaib.com/

Share this post