Salah stau Unit Iklan AdSense yang jarang sekali diterapkan oleh Blogger terutama Blogger Pemula adalah Iklan Parallax. Saya sendiri baru menerapkannya beberapa hari yang lalu setelah berkunjung ke Blog Igniel dan bertanya ke Groub Blogger Indonesia mengenai nama iklan tersebut.Sebenarnya saya sebelumnya pernah tertarik memasang iklan Parallax, namun karena ketidak tahuan nama dari unit iklan tersebut membuat saya kesulitan mencari tutorial pemasangannya.
Iklan Parallax merupakan iklan yang berada di dalam konten postingan berukuran persegi panjang dan berada seperti di balik konten tulisan sehingga tidak menggagung pembaca ketika menikmati isi konten postingan. Untuk lebih jelasnya silahkan perhatika screenshot di bawah ini:
Ketika Artikel saya scrol ke atas maka tampilan iklan akan tertutup mengikuti pergerakan scrol halaman konten.
Cara Membuat dan Memasang Iklan AdSense Parallax di Blog AMP
1. Buka Dasboard Blogger kemudian pilih Menu EDIT HTML yang ada di Menu Tema
2. Salin kode berikut ini dan tempelkan 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>
3. Cari dan Temukan Kode <style amp-custom='amp-custom'>
4. Tempelkan kode CSS berikut ini di bawahnya
.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
}
}
.above_post amp-ad {
margin-top: 60px
}
Jika blog anda menggunakan header sticky, dan tampilan iklan terpotong oleh tampilan Sticky Header ganti nilai angka margin-to: 60 px sesuaikan dengan nilai tinggi Sticky Header Blog Anda.
5. Cari dan temukan kode <div class='post-body entry-content' biasanya kode ini jumlahnya lebih dari satu, seperti blog saya ada 3 tempat penulisan kodenya.
6. Tempelkan Kode dibawah ini tepat di atasnya, silahkan lakukan uji coba penempatan kode jika kode <div class='post-body entry-content' ditemukan lebih dari satu.
<b:if cond="data:blog.pageType == "item"">
<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>
7. Tempelkan Kode ID Penayang AdSense dan ID Slot Iklan AdSense sesuai dengan tempatnya. Untuk iklan Parallax buat unit iklan Display denan ukuran persegi panjang vertikal dengan layout Responsif.
8. Simpan pengaturan dengan klick Simpan Tema
9. Lihat hasilnya setelah beberapa menit dengan mengakses salah satu konten postingan blog yang sudah mendapatkan banyak trafik pengunjung, karena biasanya Iklan AdSense yang baru dibuat baru bisa tayang setelah beberapa menit.
Demikianlah Tutorial Cara Membuat dan Memasang Iklan AdSense Parallax pada postingan blog AMP yang bisa anda coba untuk meningkatkan pendapatan penghasilan dari klick iklan AdSense. Selamat mencoba dan jangan lupa tinggal jejak dengan cara like FansPage, Subcribe dan Share.