Cara Membuat Iklan Parallax Di blog Blogger

Parallax ini mungkin bisa dikatakan sebuah desain atau efek pada obyek diam saat di scroll, Jelas hal ini banyak mengundang perhatian pembaca pada tampilan iklan tersebut.
karena kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bagian body web.
iklan Parallax saat ini sedang marak di gunakan oleh websit-website besar saat ini.

Memasang iklan parallax di blog memang merupakan ide menarik yang perlu kita coba. Dengan menggunakan iklan parallax kita dapat lebih menghemat ruangan yang ada pada blog.

Iklan Parallax memang tidak di sediakan oleh Adsense, tetapi 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.
Bagi Anda yang tertarik untuk membuat iklan parallax di blog silahkan ikuti langkah-langkahnya di bawah ini.

• Buka akun blogger Anda
• Pilih menu template >> Edit HTML
• letakan kode dibawah ini tepat diatas kode </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: 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 mencari code <div class='post-body entry-content'
• Jika sudah ketemu, lalu letakan kode dibawah ini tepat diatas kode tadi.

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

• Click Save Theme Simpan
• Parse terlebih dahulu code iklannya, kalian bisa menggunakan tools parse Disini
• selanjutnya silahkan kalian pastekan code iklan nya.

Demikian artikel mengenai Cara Membuat Iklan Parallax Di Blogspot Semoga bermanfaat.