Cara Mudah Membuat Iklan Parallax Adsense di Blog

Apakah agan sudah tau apa itu parallax? Parallax adalah desain blog yang di mana objek latar belakang gerakannya akan lebih lambat. Parallax ini juga bisa diterapkan pada iklan adsense, pada saat agan scroll kebawah atau keatas terlihat iklan tersebut akan diam pada tempatnya.

Pemasangan iklan adsense parallax ini sangat membantu bagi blog agan yang kekurangan widget untuk memasang iklan.

Cara Mudah Membuat Iklan Parallax Adsense di Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy dan paste 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: 99;
}
.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;
}
.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 cari kode <div class='post-body entry-content' pada template gan, kode tersebut terdapat banyak di template, copy kode dibawah ini dan pastekan tepat diatas kode <div class='post-body entry-content'

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="KODE ADSENSE DISINI" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Rubah yang sudah saya tandai dengan kode adsense agan

Jika serasa sudah semua lalu klik Simpan Tema dan lihat hasilnya.

Oke sekian yang bisa saya sampaikan tentang Cara Mudah Membuat Iklan Parallax Adsense di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Sekian artikel Seopedia tentang Cara Mudah Membuat Iklan Parallax Adsense di Blog Semoga bermanfaat.