Iklan parallax adalah jenis iklan yang berada dibagian belakang sebuah artikel. Sifat iklan parallax adalah seperti background yang akan diam pada posisinya meski kita melakukan scroll artikel ke arah bawah atau atas.

Dari beberapa tutorial yang sudah saya temukan di google tentang cara pasang iklan parallax pada blog, yang benar-benar bisa di aplikasikan dalam template viomagz adalah kode dari blog caramanual.com.

Nah dalam artikel kali ini saya akan menjelaskan kembali cara pemasangan iklan parallax di template viomagz.

Cara Pasang Iklan Parallax di Viomagz

Ada beberapa tahapan yang harus anda dilakukan untuk membuat iklan parallax sukses dipasang pada template viomagz.

Langkah pertama:

Buka dashboard blogger
Pilih tema
pilih edit HTML

Langkah kedua:

Cari dan masukan kode CSS dibawah ini sebelum </head>

<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: 99;
}
.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;
}
.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: 650px;
    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>

Selanjutnya silahkan cari kode dibawah ini:

<div class='post-body entry-content'

Perhatikan:

Dalam template viomagz terdapat empat buah kode yang sama dengan kode tersebut. Setelah anda menemukannya maka silahkan pilih nomor tiga dan masukan kode dibawah ini sebelum kode tersebut.

<!--iklan parallax Max Ikhsan-->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='paralax_div'>
  <div>
    <div>
      <div>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ccJhJ5afDHw3L8Hta3Is3Z8oFJXQgGGTnp1RWDxPYV-m0opNk-Z0R_ATtN9dpOA9vvHicF2ASpTJ78OO9Y7WZkQt3VWLYCztdPyItVNM1inmt1YJwEynj2MBEanhQxNqcyH4H4FM5guGsKvzldWyvryh-1Z1WViccpsHSaPiR1C0ZjHv73Y0Dw/s182/profil%20max%20ikhsan.png" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class='clear'/>
</div>
</b:if>   
</b:if>
Klik simpan dan lihat hasilnya.

Catatan:

Pada kode yang saya tandai dengan warna kuning harus diganti dengan kode iklan AdSense anda.

Cara Setting Iklan Parallax di Template Viomagz

Agar iklan parallax yang tampil pada template viomagznya bagus, maka silahkan ikuti settingan yang saya terapkan dalam blog ini.

Iklan parallax dalam blog ini hanya tampil di versi mobile, sehingga apabila anda ingin melihatnya secara langsung, maka anda harus membuka blog ini menggunakan smartphone.

Agar iklan parallax dalam blog anda hanya tampil dalam versi mobile, maka anda harus menggunakan tag kondisional.

Atau silahkan copy kode dibawah ini!

<!--iklan parallax Max Ikhsan-->
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='paralax_div'>
  <div>
    <div>
      <div>
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ccJhJ5afDHw3L8Hta3Is3Z8oFJXQgGGTnp1RWDxPYV-m0opNk-Z0R_ATtN9dpOA9vvHicF2ASpTJ78OO9Y7WZkQt3VWLYCztdPyItVNM1inmt1YJwEynj2MBEanhQxNqcyH4H4FM5guGsKvzldWyvryh-1Z1WViccpsHSaPiR1C0ZjHv73Y0Dw/s182/profil%20max%20ikhsan.png" alt="banner" title="banner" width="300" height="600" />

      </div>
    </div>
  </div>
<span class='clear'/>
</div>
</b:if>   
</b:if>
</b:if>

Kode yang saya tandai dengan warna kuning adalah tag kondisional untuk tampilan mobile. Apabila anda ingin iklan parallaxnya hanya tampil pada versi desktop, maka silahkan ganti tulisan true (warna hijau) menjadi false. Jika anda ingin iklan parallax tampil pada kedua versi tersebut, maka anda tidak perlu menggunakan tag kondisional.

Setting Iklan Parallax Agar Tumpang Tindih

Jika anda pengguna template viomagz, anda pasti tau bahwa template ini sudah menyediakan widget penempatan iklan dalam artikel sebanyak empat buah.

Agar iklan parallax tidak tumpang tindih dengan iklan dalam artikel, maka sebaiknya untuk iklan artikel pertama (yang paling atas dalam artikel) di buat agar hanya tampil dalam versi desktop. Artinya anda harus menggunakan tag kondisional pada kode iklan yang ada di widget iklan tersebut.

Perhatikan, jangan memasukan tag kondisional dalam menu tata letak, karena dari eksperimen yang saya lakukan dalam blog ini hasilnya malah membuat iklan parallax ikut tampil dihalaman homepage, baik di versi web atau di versi mobile.

Untuk menerapkan tag kondisional pada kode iklan yang ada dalam widget tata letak, maka perhatikan caranya berikut ini

Buka Dashboard blogger
Pilih Tema
Pilih Edit HTML

Contohnya misalkan anda menggunakan kode iklan AdSense seperti ini di widget iklan dalam artikel yang pertama.

&lt;!-- Ads Judul --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:420px;height:280px&quot;
     data-ad-client=&quot;ca-pub-XXXXXXXXXXXXXXXX&quot;
     data-ad-slot=&quot;2107913070&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
     (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

Perhatikan judul iklan yang saya tandai dengan warna kuning. Apabila iklan yang anda pasang dalam widget menggunakan judul seperti contoh diatas, maka anda tinggal cari judul iklannya saja dengan menggunakan shrotcut CTRL+F.

Setelah ditemukan, maka kurang lebih anda akan melihat kode seperti dibawah ini.

<b:section class='iklan-atas' id='iklan-atas' maxwidgets='1' showaddelement='yes'>
    <b:widget id='HTML996' locked='true' title='' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>&lt;!-- Ads Judul --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:420px;height:280px&quot;
     data-ad-client=&quot;ca-pub-8782607758439886&quot;
     data-ad-slot=&quot;2107913070&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
     (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
	  <b:if cond='data:blog.pageType in {&quot;item&quot;}'>
	  <!-- only display title if it's non-empty -->
	  <b:if cond='data:title != &quot;&quot;'>
		<h2 class='title'><data:title/></h2>
	  </b:if>
	  <div class='widget-content'>
	    <div id='kode-iklan-atas'>
		<data:content/>
		</div>
	  </div>
	  </b:if>
	  
	  </b:includable>
    </b:widget>
  </b:section>

Masukan tag kondisional dibawah ini diatas kode yang saya tandai warna kuning.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

Jangan lupa setelah itu tag kondisionalnya ditutup lagi dengan kode </b:if>

Catatan:

Iklan parallax yang saya bagikan ini memang sudah bisa diaplikasikan pada template viomagz. Namun untuk posisi iklan parallaxnya sendiri akan tampil dibagian atas artikel.

Saat ini saya masih mempelajari bagaimana cara membuat iklan parallaxnya bisa ada di posisi tengah-tengah artikel. Apabila saya berhasil, maka scriptnya akan saya bagikan di artikel ini.

Update:

Iklan parallax di template Viomagz berhasil saya buat tampil di tengah artikel dengan menggunakan kode dari wendycode.com

Pertama:

Buka Dashboard Blogger
Pilih Tema
Pilih Edit HTML

Cari ]]></b:skin>

Masukan kode CSS di bawah ini tepat di atas kode tersebut.

/* iklan paralax by wendy code  */
.wendyparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.wendyparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.wendyparalax > 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)}
.wendyparalax > 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}
.wendyparalax > div > div > div > *{margin:auto}
.wendyparalax > div > div > div > a{width:100%;height:100%}
.wendyparalax img,.wendyparalax iframe,.wendyparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.wendyparalax{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;}

Selanjutnya, cari kode <data:post.body/>

Di template Viomagz, kode ini bisa lebih dari satu. Namun apabila Anda menemukan kode tersebut berjumlah tiga, maka simpan kode di bawah ini tepat di bawah kode <data:post.body/> yang ketiga.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='wendyparalax'>
   <div>
    <div>
      <div>
      <!-- iklan parallax fix -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-slot='6500040497' style='display:inline-block;width:360px;height:600px'/>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
 <span class='clear'/>
</div>
<script> //<![CDATA[
// munculkan iklan pada pragraf sekian by https://www.wendycode.com 
function wendyparalax(Ad1) {let paralax = document.getElementsByClassName ('wendyparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} wendyparalax(4);/*]]>*/</script></b:if></b:if>

Ganti bagian ca-pub dengan id AdSense anda.

Klik simpan dan lihat hasilnya.

Demo

Penting:

Agar iklan parallax bisa muncul, maka anda harus menggunakan tag <p> saat membuat artikel.

Apakah Iklan Parallax Aman Untuk AdSense?

Baca: Cara Membuat Feed Postingan Homepage Mirip Iklan

Jujur saya belum tau, karena iklan parallax di blog ini juga dipasang tidak lama sebelum artikel ini dibuat. Namun secara umum selama kita tidak melanggar peraturan penempatan iklan AdSense, maka iklan parallax ini tidak akan mendatangkan masalah.

Salah satu blog yang saya jadikan referensi penggunaan iklan parallax pada blog adalah ignil.com. Selain memberikan tutorial cara pasang iklan parallax di blogger, beliau juga menjelaskan bahwa selama 2 tahun lebih menggunakan iklan parallax itu tidak ada apa-apa karena prinsipnya sama dengan iklan tengah artikel, hanya saja penempatannya ada dibelakang artikel itu sendiri.

Nah itulah ulasan mengenai cara memasang iklan parallax di template viomagz.

Semoga bermanfaat.

Max Ikhsan

Hai, Saya adalah pemilik blog ini. Mau Kerja Sama? Hubungi maxikhsan.cs@gmail.com

Tutup Komentar

Berkomentarlah dengan bijak dan sopan!

# Silahkan tulis pesan di kolom komentar.

# Pesan akan dibalas saat saya online.

# Komentar spam tidak dipublikasikan.

Idrora10 November 2023 pukul 11.42
di artikel bny penjelasan penggunaan kode, penjelasannya tumpang tindih, bingung pake kode yg mana setelah ada update terakhir dari wendy,code, jadi kesimpulannya pake kode yg mana. Maaf bila kurang berkenan. Trima kasih. Semoga sukses
BalasHapus
Balasan

Tambahkan komentar

Cara Memasang Iklan Parallax di Tengah Template Viomagz

Cara Pasang Iklan Parallax di Viomagz

Cara Setting Iklan Parallax di Template Viomagz

Setting Iklan Parallax Agar Tumpang Tindih

Apakah Iklan Parallax Aman Untuk AdSense?