Cara Membuat Iklan Parallax Scrolling di Posting Blog

lewis-kull-Cara Membuat Iklan Parallax di Posting Blog. Apa sih iklan parallax scrolling itu sobat, parallax ini mungkin bisa dikatakan sebuah desain atau efek pada obyek diam saat discroll, setau saya sih begitu, karena memang perkembangan dari design web terus hadir dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai menyesuaikan diri dengan perkembangan tersebut, ya seperti contoh salah satunya dengan teknik iklan parallax ini.

Jelas hal ini untuk mengundang perhatian pembaca pada tampilan iklan tersebut, seperti contoh gambar di atas ini, dan untuk memanjakan mata pembaca dengan membuat tampilan iklan tersebut menjadi parallax, karena kita akan melihat secara keseluruhan gambar tersebut dengan cara menscrolling bagian body web, kurang lebihnya seperti itu penjelasan tentang iklan parallax tersebut, tutorial cara membuat iklan parallax ini saya ambil kodenya dari mas Adhy kompiajaib, sebelumnya terimakasih banyak mas adhi.

Cara Membuat Iklan Parallax di Blog

1. Buka akun blogger Anda

2. Pilih menu template >> klik edit HTML

3. Sekarang 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>

Selanjutnya sobat cari kode seperti ini <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>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- kode iklan paralax by lewis-kull.com -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="2xxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Silahkan ganti kode ca-pub-xxxxxx dengan id penayang anda dan ganti data-ad-slot "2xxxxxxxx" dengan kode slot iklan anda.

Terakhir Save/Simpan Tema,lalu lihat hasil nya!

Nah itu saja artikel Cara Membuat Iklan Paralax di Postingan Blog dari saya jika ada penjelasan yang tidak jelas silahkan tanya di kolom komentar :)

Baca juga :