Cara Memasang Iklan Parallax di Blog Valid AMP

Cara Memasang Iklan Parallax di Blog Valid AMP

Pernahkah kamu melihat blog yang iklannya seperi berada di sebalik artikel saat discroll, nah iklan tersebutlah yang sebenarnya bernama iklan parallax. Lantas bagaimanakah cara membuat dan memasang iklan parallax di blog valid amp.

Seperti yang telah disebutkan diatas bahwa iklan parallax ialah iklan seolah-olah berada di belakang artikel. sangat unik bukan, apalagi iklan jenis parallax ini bisa mendatangkan klik yang dominan bagi pengunjung.

Iklan parallax ini menggunakan teknik khusus dimana objek yang berada dibawah latar belakang (iklan) bergerak lebih lambat dibanding objek di depan (artikel/postingan). Sehingga terlihat objek tersebut tidak bergerak meskipun kita gulir. Teknik ini disebut dengan Parallaks Scrolling Web Design.

Bagi kamu yang baru menggunakan blog AMP dan bingung bagaimana menempatkan iklan adsense. bisa dilihat cara memasang iklan adsense valid di blog amp.

Ketika kita akan memasang iklan parallax ini pada blog/wesbite AMP, diharuskan untuk menggunakan amp-fx-flying-carpet.

Silahkan simak tutorial bagaimana cara membuat dan memasang iklan parallax di blog valid amp berikut ini.

Cara Memasang Iklan Parallax di Blog

1. Buka dashboard Blogger kamu

2. Pilih menu Tema > Edit HTML

3. Tempel kan kode berikut 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>

4. Kemudian cari kode <div class=’post-body entry-content’ …>

5. Setelah ketemu kode yang serupa, letakkan kode berikut tepat diatas kode <div class=’post-body entry-content’ …> 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='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
</amp-ad>
</amp-fx-flying-carpet>
</div>
</b:if>

Ganti ad client dan ad slot dengan kode iklan adsense kamu.

6. Selanjutnya tempelkan kode ini 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 diblog kamu menggunakan menu sticky header, silahkan kamu tambahkan CSS dibawah agar 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.

Itulah tutorial bagaimana cara membuat dan memasang iklan parallax di blog valid amp. silahkan cek blog kamu untuk melihat langsung hasilnya, apabila ada yang ditanyakan komentar saja dibawah. Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *