Cara Membuat Iklan Adsense Tetap Diam Saat Halaman Di Scroll

Cara Membuat Iklan Adsense Tetap Diam Saat Halaman Di Scroll. Jika Anda bingung maksud dari artikel ini seperti apa, maka kalian bisa melihat demo nya di bawah ini, lebih tepat nya iklan tersebut bernama "Iklan Parallax Scrolling". Apa sih iklan parallax scrolling itu? 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.

Cara Membuat Iklan Adsense Tetap Diam Saat Halaman Di Scroll
Iklan Parallax Scrolling

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 pada situs Kompi Ajaib.

Maka untuk update terbaru pun saya tidak mau ketinggalan, dan sekarang jika sobat berminat untuk membuat iklan parallax tersebut diblog sobat, silahkan ikuti tutorialnya..

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>
        <img src="https://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

Silahkan ganti kode gambar atau banner yang saya tandai warna merah dengan gambar atau banner iklan blog Anda atau bisa juga diganti  dengan kode iklan adsense sobat, nah cara membuat iklan parallax tersebut ternyata memang sangat mudah sobat.

Sekian artikel kali ini dengan judul Cara Membuat Iklan Adsense Tetap Diam Saat Halaman Di Scroll, semoga bermanfaat.

Sumber Artikel : http://www.madamvia.web.id/2017/06/membuat-iklan-parallax-scrolling-blog.html

Silakan Share :

Artikel Terkait

Previous
Next Post »
Back to Top