-->

Cara Membuat Iklan Parallax di Blog Update 2020

Iklan Parallax si Blog

Iklan Parallax ~ Jenis iklan ini banyak dipasang oleh blog-blog besar seperti Igniel, Kompas dan sebagainya. Kelebihannya yang dimiliki iklan ini begitu bagus, apabila pengunjung membaca sebuah artikel di blog dan sudah terpasang jenis ini otomatis para pengunjung akan melihat iklan itu dibalik artikel ketika mereka menscrollnya.

Iklan ini akan mempercapat penghasilan iklan Sobat apabila memasangnya, jika belum mengetahui lebih jelas gimana contohnya bisa cek link dibawah:

Berbicara tentang Iklan Parallax ini memang tidak diberikan oleh pihak penyedia iklan seperti AdSense, MGID dan sebagainya. Oleh sebab itu, para blogger berinisiatif untuk membuatnya sendiri agar penghasilan mereka bertambah. Untuk itu Admin akan membahas terlebih dahulu tentang jenis iklan ini agar Sobat lebih memahaminya.

Apa Itu Iklan Parallax?

Iklan Paralax ialah iklan yang akan tetap ada meskipun visitor men-scroll halaman artikel tersebut. Posisi iklan Parallax ini berada tepat di background, jadi meskipun artikel di scroll ke bawah iklan ini akan tetap berada diposisinya dan tidak akan ikut bergerak meski di scroll.

Apakah iklan ini berbahaya terhadap akun AdSense?

Menurut pengalaman yang Admin alami tidaklah berbahaya, karena sudah Admin buktinya pada blog utama yang Admin kelola dan hasilnya aman-aman saja sampai saat ini, terbukti juga website-website besar diluar sana pun sampai sekarang masih menggunakannya

Iklan Parallax memang tidak di sediakan oleh AdSense seperti yang Admin bahas tadi, Sobat harus  berinisiatif sendiri agar Iklan Parallax ini bisa berjalan dengan baik. Untuk unit iklan yang diperlukan ialah 300x600 yang sudah diberikan AdSense.

Sebelum masuk ke pembutannya, ada beberapa hal yang harus Sobat persiapkan yaitu:

  • Membuat Unit Iklan 300x600
  • Parse kode iklan tersebut terlebih dahulu. Untuk tools parsenya Sobat bisa cari digoogle.

Apabila persiapan tersebut sudah selesai, kita lanjut ke tutorialnya.

Cara Membuat Iklan Parallaz di Blog Terbaru

Inilah cara pemasangan iklan parallax terbaru, sebagai berikut:

  1. Buka dashboard Blogger terlebih dahulu.
  2. Pilih menu Tema > Edit HTML.
  3. Cari kode </head> kemudian simpan kode dibawah tepat diatas/ sebelum kode tadi.
  4. <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>
  5. Tunggu, cari kembali kode <div class='post-body entry-content' dan copy kode dibawah tepat sebelum/ diatas kode tadi.
  6. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="paralax_div">
      <div>
        <div>
          <div>
           PASTEKAN CODE IKLAN YANG SUDAH DI PARSE TADI DISINI
           </div>
         </div>
       </div>
    <span class="clear"/>
    </div>
    </b:if>

    NB: rubah kode yang berwarna merah dengan kode iklan Sobat yang sudah diparse.

  7. Terakhir, silahkan Simpan.
Kode <div class='post-body entry-content' ini biasanya ada 3 sampai 4 tergantung template, Sobat dapat simpan di kode yang ke-3. Apabila tidak berhasil silahkan coba kesemuanya sampai berhasil.

Apabila langkah-langkah tadi Sobat lakukan dengan benar, Ingsyaallah iklan tersebut akan terpasang dengan berhasil di blog.

Itulah tutorial Cara Membuat Iklan Parallax di Blog yang dapat Admin bagikan, semoga bermanfaat dan apabila ada pertanyaan langsung saja komen di kolom komentar yang sudah tersedia. Sampai jumpa, sekian dan terimakasih.