Cara Membuat Iklan Parallax Adsense di Blog

Cara Membuat Iklan Parallax Adsense di Blog - Pada peluang kali ini saya bakal share untuk kalian (Blogger) teknik memasang iklan parallax di dalam postingan.

Baca Juga: Cara Memasang Iklan In-Feed Ads Google Adsense di blog

Sudah ada tau belum apa tersebut parallax? parralax adalah desain blog yang dimana objek latar sangat belakang bergeraknya lebih lambat dari pada didepannya parallax ini pun dapat diaplikasikan terhadap iklan adsense ketika sobat scroll kebawah atau keatas iklan itu akan tampak diam pada tempatnya.

Biasanya ukurannya pada iklan parallax ini 300x320 pemasangan iklan parallax ini paling membantu untuk blog sobat kelemahan widget guna pemasangan iklan.
Oke langsung saja ke caranya..

Cara Membuat Iklan Parallax Adsense di Blog

1. Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini dan pastekan 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>

2. Cari kode <div class='post-body entry-content' pada template sobat biasanya terdapat banyak kode tersebut kemudian 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>

3. Klik simpan pada template.
Bagi yang bertanda merah bisa diganti dengan kode adsense sobat sendiri.





Oke sekian dulu tentang Cara Membuat Iklan Parallax Adsense di Blog Terima Kasih semoga bermanfaat untuk kalian semua.