Cara Membuat Iklan Parallax di Blogger

Table of Contents

Hallo sobat. Kali ini saya akan berbagi sedikit tutorial bagaimana cara membuat iklan parallax di blogger. Mungkin dari Anda atau pembaca lainnya pernah mendengar apa itu iklan parallax.

Berikut penjelasannya. Iklan parallax tidak di sediakan oleh Google AdSense, maka kita harus membuatnya sendiri atau sedemikian rupa agar iklan ini berjalan dan berfungsi dengan baik sebagaimana iklan yang lainnya.

Lalu, bagaimana cara membuat iklan parallax tersebut. Berikut cara membuat iklan parallax di blogger.

• Buat unit iklan ukuran 300x600
• Parse terlebih dulu kode iklannya
• Lalu masuk akun blogger Anda
• Pilih Tema > Edit HTML
• Cari kode </head> atau </head>
• Copy kode dibawah ini pastekan tepat diatas 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>

• Cari kode <div class='post-body entry-content'
• Lalu copy kode dibawah ini dan pastekan tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
       Paste code iklan yang sudah di parse disini
       </div>
     </div>
   </div>
<span class="clear"/>
</div>
</b:if>

Khusus pengguna template VioMagz, pada code <div class='post-body entry-content' terdapat beberapa kode yang sama. Pastekan hanya pada code dibagian ke-3.

Jika tutorial dan langkah yang sobat lakukan benar, maka kode ini akan berfungsi dengan baik dan jika terjadi error silakan sobat cek kembali. Semoga bermanfaat.