Cara Membuat Iklan Parallax Tampil Ditengah Postingan

Jenis iklan Parallax saat ini tengah tren digunakan oleh website - website besar. Mengapa demikian? Karena iklan model ini turut membantu mendatangkan jumlah Klik atau CPC pada iklan tersebut.

Iklan model Parallax juga dapat digunakan untuk memasang iklan selain Adsense. Misalnya : Adstera ( lihat seperti pada iklan yang saya pasang ). Namun , bila anda menggunakan jenis iklan dari Adsense sebaiknya diatur dulu ukuran iklannya.

Bila berbicara soal iklan Parallax , apa sih itu Parallax?

Iklan Parallax adalah iklan yang akan tetap menetap meskipun visitor menscroll halaman pada artikel. Iklan parallax di background mesti artikel di Scrool ke bawah. Iklan tersebut akan berada pada posisinya dan tidak akan bergerak meskipun kita scroll kebawah.

Apakah model iklan ini bahaya buat adsense?

Jawabannya tidak berbahaya , karena jenis atau model iklan seperti Parallax diklaim lebih aman dan efisien. Banyak juga para web besar yang menggunakan model iklan seperti ini. Justru dengan anda menggunakan model iklan parallax tentu akan membuat fariasi tersendiri pada blog anda.

Selain itu , Iklan Parallax juga tidak disediakan oleh Adsense. Kita harus membuatnya sedemikian rupa agar iklan parallax ini dapat bekerja dengan baik. Untuk adsense , kita hanya perlu membuat unit iklan dengan ukuran 300 x 600 yang sudah disediakan.

Sampai disini sudah paham? Okey, lanjut ke tutorial cara membuatnya. Langkah - langkah yang harus anda tempuh untuk membuat iklan parallax sebagai berikut.

1. Buka dasboard blog kalian
2. Klik Tema lalu edit HTML
3. Pasang - pasang Script
4. Selesai dan lihat hasinya

Terdapat empat langkah yang harus kalian tempuh. Langkah pertama buka dasboard blog kalian dan kedua klik Tema > edit html.

Klik Tema ( lihat gambar diatas ) dilanjutkan klik Edit HTML ( lihat gambar dibawah )

Bila sudah maka akan keluar tampilan seperti pada gambar dibawah ini. ( langkah ini khusus blogger pemula , bila anda sudah mahir silahkan skip langkah ini )

Sampai disini sudah paham? Baik mari kita lanjutkan tutorialnya. Langkah selanjutnya , masih di mode HTML silahkan cari kode </head> lalu Copy kode dibawah ini dan pastekan diatas kode tersebut.

Copy kodenya dibawah ini :

<!-- KODE CSS PARALLAX -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ .paralax_div { position: relative; overflow: visible; width: 300px; height: 250px; margin-right: 20px; display: inline-block; float: left; z-index: 9999; } .paralax_div > div { overflow: hidden; width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; clip: rect(auto auto auto auto); } .paralax_div > div > div { width: 100%; height: 100%; position: fixed; top: 0; margin: 0 auto; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .paralax_div > div > div > div { width: 100%; height: 100vh; position: absolute; left: 50%; top: 0; border: none; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #ddd; } .paralax_div > div > div > div > * { margin: 0; margin-top: 0; } .paralax_div > div > div > div > a { width: 100%; height: 100vh; } .paralax_div img,.paralax_div iframe,.paralax_div ins { height: 600px; width: 300px; } .clear { clear: both; display: block } @media screen and (max-width:640px) { .paralax_div { width: 100%; height: 250px; margin: 0 auto; float: none; } .paralax_div > div > div > div { left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .paralax_div > div > div { width: 100%; left:0; text-align: center; } .paralax_div img { margin: 0 auto; width:auto; max-width:100%; height:auto; } } @media screen and (max-width:320px) { .paralax_div iframe,.parallax_banner ins { margin: 0 auto; width:100%; height:600px; } } /*]]>*/ </style> </b:if>
<!-- SAMPAI DISINI -->

Bila sudah langkah selanjutnya adalah silahkan kalian cari kode <div class='post-body entry-content' letak kode tersebut berada diatas <data:post.body/>

PERHATIAN!

<data:post.body> pada struktur tema berbeda - beda. Ada yang berjumlah 4 dan ada pula yang 1. Silahkan kalian cek lebih teliti lagi. Bila ada 4 kode kalian pilih yang ke 3.

Baik , Sampai disini sudah paham? Mari kita lanjutkan. Setelah ketemu kode tersebut copy dan pastekan Script dibawah ini tepat diatasnya.

<!-- SCRIPT KODE PARALLAX --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="paralax_div"> <div> <div> <div> PASTEKAN CODE IKLAN YANG SUDAH DI PARSE TADI DISINI </div> </div> </div> <span class="clear"/> </div> </b:if><!-- BATAS -->

Jangan lupa untuk men-parse kode iklan kalian terlebih dahulu. Untuk Cara Parsenya Parse nya klik disini. 

Bila semua langkah sudah dilakukan klik SIMPAN dan lihat hasilnya.

Demo Parallax
Bila sudah berhasil menerapkan tutorial ini dan penempatan iklan parallax tepat ditengah - tengah postingan maka SELAMAT anda lulus mengikuti tutorial training ini. Namun bila iklan parallax muncul diatas atau dibawah judul maka lakukan hal berikut.

Langkah tambahan pertama silahkan kalian ganti kode <data:post.body/> atau cukup dibuat seperti ini <!-- <data:post.body/> -->  saja sudah aman. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode yang kita tandai tadi.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>
<!-- kode css parallax dan kode iklan -->
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>       

Nah bila sudah di pastekan sesuai langkah diatas. Klik SIMPAN TEMA dan lihatlah hasilnya 100% berhasil. Bila terdapat pertanyaan silahkan hubungi kami di Contact. Terimakasih dan Semoga bermanfaat.

Referensi :

Diperbarui pada 3 Juni 2024