-->

Cara Membuat Iklan Parallax Adsense di Blog Non AMP

Daftar Isi [Tampilkan]
Hallo sobat blogger, pada kesempatan kali ini saya akan membahas mengenai cara memasang iklan parallax di blog. memasang iklan parallax ini juga bisa menghemat ruang space iklan pada blog anda, misalnya dari  ukuran 300 x 600 bisa di pangkas menjadi 300 x 400,  jadi anda bisa atur sendiri ukuranya dengan menyesuaikan ukuran unit iklan yang anda buat pada dashboard adsense.

Cara Membuat Iklan Parallax Adsense di Blog Non AMP

Apa yang di maksud dengan Parallax ? 

Parallax atau yang bisa disebut paralaks scrolling web adalah suatu teknik dimana sebuah objek yang berada di latar belakang bergerak lebih lambat jika di bandingkan objek di latar depan dan terlihat bahwa objek tersebut tidak bergerak ketika sebuah halaman di scroll ke atas ataupun ke bawah. 

Jadi jika anda memasang iklan adsense dengan efek parallax, iklan tersebut akan tetap diam di tempat meskipun anda menggulir atau scroll ke atas atapun ke bawah. 

Iklan parallax ini bisa di gunakan untuk menampilkan iklan banner, iklan dengan iframe dan iklan adsense. 



Iklan Parallax ini juga sudah saya terapkan juga pada blog saya dengan tampilan iklan di tengah dan parallax hanya aktif di mode mobile saja, sedangkan utuk mode deskop saya tidak menggunakan iklan parallax.

Nah, bagi anda yang tertarik untuk memasang iklan parallax di blog, silahkan ikuti langkah-langkah di bawah ini :

Cara Membuat Iklan Parallax Adsense di Blog Non AMP

1. Masuk terlebih dahulu ke blogger.com 
2. Pilih Tema => Edit HTML
3. Kemudian cari kode </head>
4.Jika sudah ketemu, silahkan copy CSS di bawah ini dan letakan 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: 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. Kemudia cari kode seperti di bawah ini (kode tersebut biasanya ada 3 atau 4 pada template, silahkan anda coba saja satu per satu)
<div class='post-body entry-content'
6. Apabila sudah ketemu, silahkan copy kode HTML di bawah dan letakan tepat diatas kode di atas pada langkah sebelumnya, tepatnya pada nomor 5
tips — Jika anda memasang iklan banner, tinggal ubah saja urlnya dan jangan lupa atur width dan heightnya sesuai ukuran iklannya. namun jika memasang iklan adsense atau iframe, silahkan hapus kode berikut

<img src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-R9ExTa9hdsM/XPKJYwE93nI/AAAAAAAAA20/5mGMf92ZvogB3_-dQXF1Oj6OADQINVqlQCLcBGAs/s320/lOGOSERIESWANSCR.png" alt="banner" width="300" height="600" />
dan ganti dengan kode iklan adsense anda


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
<img src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-R9ExTa9hdsM/XPKJYwE93nI/AAAAAAAAA20/5mGMf92ZvogB3_-dQXF1Oj6OADQINVqlQCLcBGAs/s320/lOGOSERIESWANSCR.png" alt="banner" width="300" height="600" />
    </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>
7. Jika sudah, silahkan simpan Tema dan cek hasilnya

Jika anda ingin efek iklan parallaxnya hanya aktif atau berjalan di mobile saja, anda bisa menggunakan kode CSS di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@media screen and (max-width:640px) {
  .paralax_div {
    position: relative;
 overflow: visible;
 width: 300px;
    height: 600px;
    display: inline-block;
  }
  .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 {
    width: 100%;
    text-align: center;
  }
  .paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:600px;
  }
  .clear {
  clear: both;
  display: block
}
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
  .paralax_div {
    height: 600px;
 width:100%;
  }
}
/*]]>*/
</style>
</b:if>

Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Iklan Parallax Adsense di Blog Non AMP. jika ada kendala silahkan tanyakan di kolom komentar di bawah ya, semoga berhasil dan bermanfaat.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 8 )
    Tutup Komentar

    8 Komentar

    1. yang ditungu" akhirnya dibuatkan, mantap sekali bro

      BalasHapus
    2. Klo tampilan nya biar seperti blog ini gimana gan? Soalnya hasil ane menutupi header stickynya

      BalasHapus
      Balasan
      1. mas pake template apa kalo boleh tau ?
        apakah peletakan kodenya sudah benar ?

        Hapus
      2. Ku pake supermag template mas,
        sudah mas, tapi headernya masih ketutup

        Hapus
    3. Kok ga bisa ya kak, ulang kali di ubah. Info kak tutorial YouTube nya. Saya tunggu

      BalasHapus
    4. Tolong di jawab kak 🙏🙏

      BalasHapus
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!