Cara Membuat Iklan Parallax AdSense di Blogger

Memasang iklan parallax di blog memang merupakan ide menarik yang perlu kita coba. Dengan menggunakan iklan parallax kita dapat lebih menghemat ruangan yang ada pada blog.

Apa itu parallax? Parallax atau paralaks scrolling web design merupakan suatu teknik khusus dimana sebuah objek yang berada pada latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan sehingga terlihat bahwa objek tersebut tidak bergerak atau diam di tempat ketika sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

Nah, jadi ketika Anda menggunakan iklan dengan efek parallax, iklan tersebut akan tetap diam di tempat meski Anda menggesernya atau scroll ke atas maupun ke bawah.

Ini berlaku untuk menampilkan iklan banner maupun iklan adsense yang memiliki ukuran besar namun hanya di tampilkan sebagian saja. Misalnya, iklan sebenarnya berukuran 300 x 600 piksel namun Anda bisa membuatnya menjadi 300 x 250 piksel saja, nah ketika iklan tersebut di scroll maka akan terlihat mulai dari bawah sampai atas jika Anda menggulirnya atau scroll ke bawah begitu juga sebaliknya.

Kalau ngomong soal slot iklan dan ruang di blog cukup penuh dengan widget-widget lain atau iklan lain sehingga tidak ada space untuk menambahkan iklan di blog, mungkin Anda bisa mencoba menggunakan widget iklan banner melayang di samping kiri dan kanan blog, ini akan sangat membantu sekali.

Pada tutorial membuat iklan parallax kali ini, iklan akan di tampilkan di bawah judul postingan blog. Sebenarnya Anda masih bisa mengatur ukuran dan posisi atau letak iklannya, jika ingin berada di tengah-tengah artikel atau postingan silahkan baca artikel cara mengenai memasang iklan adsense di tengah postingan blog.

Bagi Anda yang tertarik untuk membuat iklan parallax di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Iklan Parallax di Blog

Sebelum mencobanya mungkin Anda bisa melihat contoh iklan parallax di bawah ini:

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari kode </head>
4. Setelah ketemu Copy kode CSS 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>

5. Lalu 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'

6. Jika kode di atas sudah ketemu, silahkan Copy kode di bawah ini dan Paste di atas kode pada langkah nomor 5

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://lh3.googleusercontent.com/qrWaMv-vztxOKAKS3N55CAhYejx2CG7W1scJK8yERJMNPB9SbAsG51IvJ7bdPxx3MgIuHGKjCtT7otuGNA-N-Tj5re-RntGv_STujA=w375-h750-rw-no" alt="banner" title="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

7. Klik Simpan tema

Catatan:
Pada bagian kode ini:
<img src="https://lh3.googleusercontent.com/qrWaMv-vztxOKAKS3N55CAhYejx2CG7W1scJK8yERJMNPB9SbAsG51IvJ7bdPxx3MgIuHGKjCtT7otuGNA-N-Tj5re-RntGv_STujA=w375-h750-rw-no" alt="banner" title="banner" width="300" height="600" />
Bisa Anda ganti dengan kode iklan AdSense atau iklan banner yang Anda miliki.

Itulah artikel mengenai cara membuat iklan parallax adsense di blogger, semoga bisa bermanfaat untuk Anda.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini