Cara Membuat Iklan Parallax Di Blogspot

TechPapuaID

TechPapuaID - iklan Parallax saat ini sedang marak di gunakan oleh websit-website besar saat ini.

Mengapa demikian? Karena Iklan Parallax mampu mendatangkan jumblah klik pada iklan tersebut.

Berbicara soal Iklan Parallax, apa itu Iklan Parallax AdSense?

Iklan Paralax adalah iklan yang akan tetap menetap meskipun visitor meng-scroll halaman artikel. Iklan Parallax berada di background jadi mesti artikel di scroll ke bawah iklan Parallax ini akan tetap berada pada posisinya tidak akan bergerak meski di scroll.

Terus bagaimana, apakah iklan Parallax ini berbahaya untuk akun AdSense kita?

Menurut pengalaman pribadi saya sendiri itu tidak berbahaya, karena saya sendiri sudah membuktikannya pada blog utama saya hasilnya aman sampai saat ini dan terbukti website-website besar diluar sana pun sampai sekarang masih menggunakannya

Iklan Parallax tidak di sediakan oleh AdSense, kita harus membuatnya sedemikian rupa agar Iklan Parallax ini bisa berjalan dengan baik. Kita hanya perlu mempunyai Unit iklan 300x600 yang sudah di sediakan oleh AdSense.

Kita masuk ke pokok pembahasannya, apa saja yang harus kalian siapkan untuk membuat Iklan Parallax ini ?

• Buat Unit Iklan 300x600
• Parse terlebih dahulu code iklan tersebut, kalian bisa menggunakan tools parse Klik Disini
• Masuk ke akun blogger kalian.
• Pilih Tema
• Edit HTML

Langkah selanjutnya adalah, silahkan kalian cari code </head> atau &lt;/head&gt; dan copy code dibawah ini lalu pastekan tepat di atas code tersebut.

<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>

Jika sudah langkah selanjutnya adalah silahkan kalian cari code <div class='post-body entry-content' dan copy code dibawah ini lalu pastekan tepat di atas code yang sudah saya sebutkan di atas.

<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>

Jika kalian pengguna template viomagz, pada code <div class='post-body entry-content' terdapat beberapa code yang sama, silahkan kalian pastekan hanya pada code di bagian ke 3

selanjutnya silahkan kalian pastekan code iklan yang sudah kalian parse tadi ganti dengan tulisan yang berwarna merah diatas lalu save dan lihat hasilnya.

Demo
Click here

Jika step by step di lakukan dengan benar, maka code ini akan bekerja dengan baik, jika terjadi eror silahkan lihat baik-baik dan jangan sampai ada yang terlewatkan.

Demikian artikel mengenai Cara Membuat Iklan Parallax Di Blogspot yang bisa kami berikan, mohon maaf jika ada salah-salah penulisan.