Halo bro! Selamat Datang di Blog Herdamedia.com
Pada kesempatan kali ini saya akan membagikan tutorial kepada kalian Cara pasang iklan parallax di tengah postingan. Iklan dengan bentuk parallax ini tampil sangat unik dan menarik, karena posisinya terlihat seolah-olah terlipat kedalam dinding postingan.
Apa itu Iklan Parallax?
Iklan parallax adalah jenis iklan yang terlihat menempel, di belakang halaman postingan. Dan posisinya akan tetap diam saat pengunjung melakukan scroll, sehingga terkesan muncul dari dalam. Itulah sebabnya banyak sekali website-website besar yang menggunakan iklan jenis parallax ini, karena tampil unik dan berbeda.
Apakah Iklan Parallax Aman?
Pada dasarnya iklan dengan bentuk parallax hampir sama dengan iklan tengah artikel yang berbentuk vertikal, namun posisinya ada di dalam lipatan halaman postingan.
Kebanyakan dari website besar pun menggunakan iklan jenis parallax ini, jadi mana munggkin mereka menggunakan jenis parallax jika berbahaya.
Tidak ada seorang pun yang menyebut jenis parallax berbahaya, mungkin juga banyak yang mengatakan jika kalian menempatkan jenis parallax ini lebih dari satu akan membuat tata letak postingan menjadi kurang menarik. Maka dari itu pada javascript parallax yang saya bagikan ini hanya di buat supaya tampil satu iklan parallax saja.
Cara Pasang Iklan Parallax
Langkah 1: Pertama kalian Login dengan akun blogger kalian di www.blogger.com
Langkah 2: Pada Dashboard Blogger, kalian klik Tema.
Langkah 3: Kemudian klik ikon panah ke bawah disamping menu 'Sesuaikan'
Langkah 4: Klik Edit HTML, Kalian akan diarahkan ke halaman pengeditan.
Langkah 5: Setelah itu cari kode ]]></b:skin> dan masukan kode CSS dibawah ini, tepat diatas kode tersebut.
/* iklan paralax by herdamedia.com */
.hmparallax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.hmparallax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.hmparallax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.hmparallax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.hmparallax > div > div > div > *{margin:auto}
.hmparallax > div > div > div > a{width:100%;height:100%}
.hmparallax img,.hmparallax iframe,.hmparallax ins{height:100%;border:0}
.hmparallax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block; margin:10px 0px; padding:0px;}
Langkah 6: Selanjutnya temukan kode penutup </body> atau </body> kemudian masukan kode Javascript dibawah ini tepat diatas kode tersebut.
<script>/*<![CDATA[*/
function hmparallax(Ads1) {let parallax = document.getElementsByClassName('hmparallax')[0]; if (parallax) {let Adsprlx = document.querySelectorAll('.post-body p, .post-body br')[Ads1 - 1]; Adsprlx.parentNode.insertBefore(parallax, Adsprlx.nextSibling)}} hmparallax(4);
/*]]>*/</script>
Ganti angka yang saya tandai sesuai dengan kebutuhan kalian, yang berarti iklan akan muncul setelah paragraf ke 4.
Langkah 7: Selanjutnya kalian buat unit iklan baru dengan memilih "Iklan Display" dan pilih bentuk "Vertikal" ukurannya biarkan "Responsive" kemudian catat kode (data-ad-client) dan (data-ad-slot).
Langkah 8: Temukan kode <data:post.body/> kemudian masukan kode Html dibawah ini tepat dibawah kode tersebut.
Dalam template lain biasanya memiliki kode <data:post.body/> lebih dari 1, jadi silahkan coba satu-persatu.
<b:if cond='data:blog.isMobileRequest and data:view.isPost and !data:view.isPreview'>
<div class='hmparallax'>
<div>
<div>
<div>
<ins class='adsbygoogle adParallax' data-ad-client='ca-pub-12345xxxxxx' data-ad-slot='12345xxxx' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
</b:if>
Silahkan ganti data-ad-client='ca-pub-12345xxxxxx' dan data-ad-slot='12345xxxx' dengan kode iklan yang tadi sudah kita buat dan catat pada Langkah 7.
Iklan parallax ini hanya akan muncul pada tampilan mobile saja, atau ketika di akses dengan parameter ?m=1
Langkah 9: Terakhir, Simpan perubahan dengan mengklik ikon simpan
Langkah 10: Selesai.
Semua langkah sudah selesai! Sekarang cek apakah iklan parallax sudah tampil? jika belum tampil, kemungkinan ada kesalahan dalam pemasangan silahkan perhatikan ulang Langkah demi langkah dengan teliti.
Demo
Kalian juga bisa melihat tampilan iklan parallax pada halaman demo, klik tombol demo dibawah ini.
Penutup
Mungkin itu saja tutorial Cara Pasang Iklan Parallax di Tengah Postingan Blog semoga bermanfaat, jika ada yang ingin kalian tanyakan silahkan komentar dibawah.