Cara Memasang Iklan Model Parallax Di Blog AMP Valid

Kalian yang mempunyai blog sudah amp ingin memasang iklan model parallax? tetapi bingung bagaimana caranya?.Sekarang kalian dapat tenang karena kalian sudah menemukan solusinya yang tepat, jadi tanpa berlama-lama langsung saja kita menuju tutorialnya.

Pengertian Iklan Parallax

Iklan parallax adalah sebuah iklan yang ditampilkan pada suatu website dan mempunyai efek mengikuti arah scroll bar kita atau bisa disebut dengan efek amp-fx-flying-carpet.

Normalnya iklan tersebut modelnya seperti berada di bawah latar belakang bergerak lebih lambat dibandingan objek iklan yang berada pada latar depan artikel.

Cara Membuat Iklan Parallax Di Blogger

1. Langkah pertama seperti biasanya, kalian login dulu menggunakan akun blogger kalian hingga pada menu dashboard.

2. Langkah selanjutnya pilih tema pada menu bagian kiri kalian.

3. Klik pada bagian edit html.

4. Langkah selanjutnya, cari kode seperti ini </head> dan pastekan kode dibawah ini tepat pada 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>

5. Jika sudah, coba cari kode seperti ini <div class='post-body entry-content'...>.

Kenapa kode terakhir diatas saya berikan tiga titik? dikarenakan pada setiap template isi dari tiga titik tersebut berbeda-beda maka carilah yang menurutmu paling cocok.

6. Jika langkah diatas sudah dilakukan dengan baik, pastekan 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='xxxxxxxxxxxxxxxxx' height='600' layout='fixed' type='adsense' width='300'> </amp-ad> </amp-fx-flying-carpet> </div> </b:if>

7. Jangan lupa kamu ganti ad client dengan slot id iklan adsense milikmu, dan silahkan diletakkan pada bawah kode <style amp-custom='amp-custom'>.

.above_post { padding-top: 8px; width: 300px; margin: 0 20px 5px 0; display: inline; float: left } .above_post amp-ad { margin-top: 60px } @media screen and (max-width:414px) { .above_post { padding-top: 10px; width: 100%; height: auto; margin: 0 0 10px; display: block; float: none } }

8. Jika semua langkah diatas sudah dilakukan tinggal langkah terakhir yaitu simpan tema.

Penutup

Itulah artikel yang dapat saya sampaikan mengenai tutorial cara memasang iklan model parallax di blogger ataupun blogspot valid amp, jika ada pertanyaan bisa ditanyakan melalui kolom komentar di bawah dan jangan lupa untuk share artikel ini ke media sosial kalian,terima kasih.

Satria Fadhil M

Seorang keras kepala dengan keingintahuanya dan betah beberapa jam berhadapan dengan gadget.

Bagikan Artikel ini