Cara Membuat Iklan Parallax di Blog Valid AMP

Cara Membuat Iklan Parallax di Blog Valid AMP
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 == &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 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.
Adsense Blogger

NULIS ARTIKEL DIJOKIJENIUS DIBAYAR

  • ARTKEL YANG DITULIS ASLI BUATAN SENDIRI
  • JENIS ARTIKEL YANG DITULIS BELUM PASARAN
  • JUMLAH KATA DALAM ARTIKEL MINIMAL 700 KATA
  • SATU ARTIKEL KAMI HARGAI 10.000

0 Response to "Cara Membuat Iklan Parallax di Blog Valid AMP"

Post a Comment

Catatan Berkomentar
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel