Cara Membuat Iklan Parallax Adsense di Blog Non AMP - SeriesWans

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.

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. 

Demo Click here

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.

Related Posts