Cara Mudah Membuat Iklan Parallax Adsense di Blog

Cara Mudah Membuat Iklan Parallax Adsense di Blog - Oke pada kesempatan kali ini saya akan share kepada kalian cara memasang iklan parallax di dalam postingan, pada postingan sebelumnya saya sudah singgung cara membuat iklan ditengah postingan blog.

Sudah pada tau apa itu parallax? parralax ada lah desain blog yang dimana objek latar paling belakang bergeraknya akan lebih lebih lambat dari pada ddidepannya parallax ini juga dapat diaplikasikan terhadap iklan adsense saat sobat scroll kebawah atau keatas iklan tersebut akan terlihat diam pada tempatnya.

Baca Juga : Cara Membuat Slot Iklan Link Mirip Adsense di Blog

Biasanya ukurannya pada iklan parallax ini 300x320 pemasangan iklan parallax ini sangat membantu bagi blog sobat kekurangan widget untuk pemasangan iklan.

Oke langsung saja ke caranya..

Cara Mudah 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.

Baca Juga : Cara Memasang Iklan Adsense di Tengah Postingan Artikel

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.