Cara Membuat Iklan Parallax 2018 Adsense di Blog

Cara Membuat Iklan Parallax 2018 Adsense di Blog - Baru-baru ini heboh sekali di dunia Blogger yang memanfaatkan media periklanan Adsense memasang iklan terbaru yang mereka beri nama Iklan Parallax, emang kenapa sih banyak sekali yang tertarik dengan tipe iklan semacam ini ?....!! Banyak alasan tersendiri yang akan dijawab oleh mereka yang suka bermain iklan Google Adsense.

www.caramanual.com

Sebenarnya Iklan parallax itu merupakan iklan baru yang mana Parallax atau bisa kita sebut Parallaks Scrolling Web Design adalah suatu teknik terbaru khusus dimana sebuah objek yang berada dibawah latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada dilatar depan sehingga terlihat objek tersebut tidak bergerak atau bisa dikatakan diam ditempat ketika sebuah halaman digulir kebawah maupun keatas.

Nah, diatas adalah apa itu yang dinamakan iklan parallax, anda bisa melihat di website punya teman saya yaitu www.adminbawean.xyz, disana anda bisa melihat contoh dari iklan parallax seperti apa...!! 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.

Sebenarnya banyak sekali jenis iklan baru yang wajib anda coba dan itupun tidak melanggar kebijakan adsense, tetapi anda tidak boleh sembarangan juga dalam meletakkannya dikhawatirkan nanti dikira menyalahi aturan Adsense dan akun anda di banned. Saya sendiri disini menggunakan iklan melayang yang mana hanya untuk mobile saja bukan untuk PC, dan saya menggunakan script khusus yang mana nantinya akan membuat iklan itu tidak melanggar aturan yang diberlalukan oleh adsense itu sendiri. 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.

Iklan Parallax 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.

Jika kita bicara 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.

www.caramanual.com

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.

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:

<imgsrc="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.

Nah, diatas saya ambil dari  sumber yang sudah saya praktekkan dan semua itu berhasil 100% tanpa ada yang tidak saya pahami, jika anda masih belum bisa untuk melakukan praktek menggunakan cara saya anda bisa melanjutkan ke link website sumber aslinya di : www.caramanual.com

Sekian dari saya mengenai iklan parallax, semoga anda bisa memahami apa yang saya bahas diatas, jika anda tidak memahaminya silahkan anda mengunjungi situs resminya cara manual. salam para blogger salam sukses...!!

Berbagi :