Memasang iklan parallax di blog memang merupakan gagasan menarik yang perlu anda coba. Dengan memakai iklan parallax saya dan anda bisa lebih menghemat ruangan yang terdapat pada blog.

Apa tersebut parallax? Parallax atau paralaks scrolling web design adalah suatu kiat khusus dimana suatu objek yang berada pada latar belakang bergerak lebih lambat dikomparasikan dengan objek yang sedang di latar depan sampai-sampai terlihat bahwa objek itu tidak bergerak atau diam di tempat saat sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

Nah, jadi saat Anda memakai iklan dengan efek parallax, iklan itu akan tetap diam di tempat walau Anda menggesernya atau scroll ke atas maupun ke bawah.

Ini berlaku untuk memperlihatkan iklan banner maupun iklan adsense yang mempunyai ukuran besar namun melulu di tampilkan beberapa saja. Misalnya, iklan sebetulnya berukuran 300 x 600 piksel tetapi Anda dapat membuatnya menjadi 300 x 250 piksel saja, nah saat iklan itu di scroll maka bakal terlihat mulai dari bawah hingga atas andai Anda menggulirnya atau scroll ke bawah begitu pun sebaliknya.

Kalau ngomong soal slot iklan dan ruang di blog lumayan penuh dengan widget-widget beda atau iklan lain sampai-sampai tidak terdapat space guna menambahkan iklan di blog, barangkali Anda dapat mencoba memakai widget iklan banner melayang di samping kiri dan kanan blog, ini bakal sangat menolong sekali.

Pada tutorial menciptakan iklan parallax kali ini, iklan bakal di tampilkan di bawah judul artikel blog. Sebenarnya kita masih dapat mengatur ukuran dan posisi atau letak iklannya, bila hendak berada di tengah-tengah tulisan atau postingan.

Membuat Iklan Parallax di blogspot

• Masuk ke akun blogger anda, lalu pilih tema klik edit html
• Cari kode </head>
• Lalu Copy kode CSS dibawah ini, kemudian Paste di atas 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>

• Setelah itu cari kode seperti di bawah ini (biasanya ada 1 sampai 4, pilih yang ke 3 atau coba satu per satu)

<div class='post-body entry-content'

• Setalah kode di atas sudah ketemu, silahkan Copy kode di bawah ini dan Paste di atas kode pada langkah diatas tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://2.bp.blogspot.com/-eXbZzcgLAuo/W0hrTjroi4I/AAAAAAAADL0/bWLvlNMeiuwsb04HgpdIkkK7TiM0HAyHQCLcBGAs/s320/26bc6948-a5b1-486e-9dd5-3a244b9a9d57.jpeg" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

• Terakhir silahkan klik simpan

Warning..!

Untuk kode dibawah ini silahkan ganti dengan iklan adsense atau gambar banner anda sendiri.

https://2.bp.blogspot.com/-eXbZzcgLAuo/W0hrTjroi4I/AAAAAAAADL0/bWLvlNMeiuwsb04HgpdIkkK7TiM0HAyHQCLcBGAs/s320/26bc6948-a5b1-486e-9dd5-3a244b9a9d57.jpeg

Untuk pemasangan pada website selain blogspot atau web buatan anda sendiri silahkan sesuaikan penempatan CSS-nya dan pemanggilan CSS-nya. Sekian dan terimakasih.