Cara Membuat Iklan Parallax di Blogger Dengan Mudah

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial mengenai bagaimana cara membuat iklan parallax dengan mudah, Iklan Adsense Parallax saat ini sedang marak-maraknya digunakan oleh para blogger dan publisher lainnya untuk mendongkrak pendapatannya. Sebab tampilan iklan ini lebih menarik perhatian pengunjung situs.

Posisi Iklan Parallax tersebut akan menetap meskipun posisi sedang discroll ke bawah, sebab letaknya berada di background situs, dengan demikian pengunjung akan melihat keseluruhan tampilan iklan yang dipasang.

Cara Membuat Iklan Parallax di Blogger Dengan Mudah

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode berikut ini </head> dan pastekan kode dibawah tepat DIATAS kode 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>

4. Selanjutnya, cari kode berikut <div class='post-body entry-content'> dan pastekan kode dibawah tepat DIATAS kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        KODE ADSENSE 300X600 ANDA YANG SUDAH DIPARSE
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

5. Ganti tulisan KODE ADSENSE 300X600 ANDA YANG SUDAH DIPARSE dengan kode iklan yang sudah anda parse.
6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial cara membuat iklan parallax di blogger, apabila kamu memiliki pertanyaan atau masalah seputar blogger silahkan komen di kolom komentar dibawah artikel ini.