Iklan parallax adalah jenis iklan unik yang menimbulkan ilusi optik pada pembaca ketika sedang melakukan scrolling paragrap artikel, iklan tsb terletak di bagian latar belakang halaman dengan posisi menempel ketika di scroll, sehingga iklan terlihat seperti sedang lewat di bagian belakang di antara paragrap text artikel yang sedang dibaca.
Iklan parallax memiliki kelebihan dan juga kekurangan, jadi wajib bagi kamu membaca dan mengetahui apa saja kelebihan dan kekurangannya sebelum memasang iklan ini di blog.
Kelebihan Iklan Parallax
Tidak hanya unik dan terlihat memanjakan mata saja karna ilusi optiknya, iklan parallax juga dapat meningkatkan CTR (Click Through Rate) karna ukurannya yang penuh hampir menutupi layar namun tidak mengganggu pengunjung.
Manfaat lainnya dari iklan parallax yang saya share ini tentunya mudah di pasang karna iklan ini hanya memanfaatkan sedikit tambahan CSS dan Javascript saja, selain itu iklan ini juga sangat cocok di pasang pada niche blog/web apapun.
Kekurangan Iklan Parallax
Iklan parallax hanya dapat timbul jika dalam kondisi mobile saja, hal itu dikarnakan penyesuaian ukuran iklan jenis Vertikal yang harus memenuhi sebagian layar. Tentunya tidak mungkin ada iklan yang memenuhi seluruh layar laptop, oleh karna itu iklan Parallax ini hanya akan timbul di smartphone.
Saya rasa kekurangannya hanya itu saja, sekarang mari kita bahas cara pemasangannya!
Cara Memasang Iklan Parallax
Pertama sebelum melakukan modifikasi, khususnya jika kamu pengguna layanan Blogger. Backup template terlebih dahulu sebelum melakukan modifikasi sangat diwajibkan.
Silahkan tambahkan kode CSS dan Javascript di bawah ini pada template blog kalian.
.parallaxAd {
display: block;
height: 600px;
margin: 1rem auto;
position: relative;
}
.prlx1 {
clip-path: inset(0 0 0 0);
position: absolute;
overflow: hidden;
margin: auto;
}
.prlx2 {
align-items: flex-start;
display: flex;
display: inline-flex;
justify-content: center;
position: fixed;
}
.prlx1, .prlx2 {
bottom: 0;
left: 0;
right: 0;
top: 10px;
}
.prlx1, .parallax ins {
height: 100%;
width: 100%;
}
(function() {
let ads = document.querySelector('.parallaxAd');
if (ads) {
let post = document.querySelectorAll('.post-body br, .post-body p'), x = parseInt(post.length / 6); // sesuaikan posisi
if (post[x].nodeName == 'P') {
post[x].parentNode.insertBefore(ads, post[x]);
}
else {
post[x].parentNode.insertBefore(ads, post[x].nextSibling);
}
}
})();
Selanjutnya jika kedua kode di atas sudah di tambahkan pada template, sekarang pergi ke dashboard Adsense untuk membuat unit iklan baru dengan format "Iklan Display".
Dikarnakan iklan parallax membutuhkan ukuran iklan yang besar, kita setting opsi ukuran Iklan Display dari Responsive menjadi Fixed atau Tetap, kemudian untuk ukurannya atur menjadi 300x600 px.
Salin kode HTML tambahan di bawah ini, lalu tempelkan kode tsb tepat di bawah <data:post.body/>
Silahkan ganti bagian yang saya tandai dengan kode Iklan Display yang sudah dibuat tadi.
<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
<div class='parallaxAd'>
<div class='prlx1'>
<div class='prlx2'>
<!-- Tempelkan Kode Iklan Di Area Ini -->
</div>
</div>
</div>
</b:if>
Untuk melihat hasilnya, silahkan kunjungi blog kamu dengan smartphone. Atau masuk ke mode mobile dengan inspect element dengan menekan tombol ctrl+shift+c.
