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.

Cara Membuat Iklan Parallax AdSense di Blogger

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:


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.

17 Komentar untuk "Cara Membuat Iklan Parallax AdSense di Blogger"

  1. Unik tampilan iklan Parallax ini ya.
    Bisa jadi pilihan buat blog ku nanti.
    Thanks infonya,mas.

    BalasHapus
  2. apakah memasang iklan parallax melanggar kebijakan adsense ?

    BalasHapus
    Balasan
    1. Kalau seperti demo di atas tidak masalah, tapi lebih berhati-hati jika ingin menggunakan efek parallax di iklan adsense.

      Hapus
    2. Kok harus berhati2? Apakah berdampak serius dengan tos gugel?

      Hapus
  3. Apakah paralax ini juga bekerja di pc

    BalasHapus
  4. kak untuk mengatur ketinggian iklan paralax ini dimana ya, misal kita ingin iklan nya tampil ditengah..

    BalasHapus
    Balasan
    1. Cari kode berikut:
      .paralax_div {
      position: relative;
      overflow: visible;
      width: 300px;
      height: 250px;
      margin-right: 20px;
      display: inline-block;
      float: left;
      z-index: 99;
      }


      float: left; berarti di kiri
      float: right; berarti di kanan

      Untuk mengatur tinggi dan lebarnya ubah bagian ini:
      width: 300px;
      height: 250px;

      Untuk muncul di tengah perlu saya pelajari dulu, karena masing-masing template bisa berbeda-beda. Tingaal di atur saja di bagian cssnya.

      Hapus
  5. Mas kalau mau buat iklan paralax pas di scroll iklannya ada di tengah posingan diatas gmana ya ?
    udah saya ubah float: left; menjadi "center" tetep aja iklannya muncul diatas

    Thanks

    BalasHapus
    Balasan
    1. Tidak ada float: center mas, untuk saat ini widget ini memang belum bisa diatur untuk diletakan di tengah.

      Hapus
  6. Mas kenapa kok iklan nya malah di atas menu navigasi mas di template viomagz? Saya bingung mas kok malah iklan nya gak di bawa menu navigasi saat di scrol ke bawah

    BalasHapus
  7. kok punya saya enggak work mas ya

    BalasHapus
    Balasan
    1. Tidak semua template dapat menggunakan tutorial ini, coba cek kembali untuk pemasangan jQuery di template yang saat ini sedang digunakan.

      Hapus
  8. terima kasih banyak min, berhasil pasang parallah di header pakai cara ini. Sukses selalu.

    BalasHapus
  9. Terima kasih tutorialnya gan, work 100% di blog saya, tapi apakah iklan ini bisa digeser lebih ketengah artikel?

    BalasHapus
    Balasan
    1. Bisa, namun perlu penyesuaian lagi di bagian kode CSSnya

      Hapus
  10. Terimakasih tutorialnya mas, saya coba terapkan mudah mudahan work

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel