Tutorial Membuat Iklan Background Mirip Banner Iklan Kompas.com

Selamat datang kembali di blog portal sumut, dimana pengelolanya selalu bangga, bahkan over confident menilai blog ini sebagai blog zaman now atau blog masa kini. Apa iya? Coba tanya pada rumput yang bergoyang. :)

Pernahkan anda mengunjungi media online kompas.com? Jika pernah, mungkin anda sering melihat banner iklan kompas berada di tengah artikel/berita yang ketika kita menggulir (scroll) teksnya (isi) ke atas,  namun banner iklan (iklan background) tidak ikut bergulir. Jenis iklan ini sangat direkomendasikan buat anda yang ingin meningkatkan pendapatan adsense anda, hal itu dikarenakan jenis banner iklan ini sangat ramah terhadap pembaca, dan hal ini yang menyebabkan kompas.com mempertahankan jenis posisi iklan seperti ini. Beberapa website berita lainnya bahkan sering mencari tahu bagaimana cara membuat jenis banner iklan background yang dibuat oleh kompas.com.

Jika anda penasaran jenis iklan mana yang dimaksud penulis disini, anda dapat mengunjungi kompas.com atau dapat melihat gambar contoh  banner iklan di bawah ini.

Lalu, bagaimana cara membuatnya? Sebelum anda menerapkan prosedur ataupun langkah-langkah di bawah ini, pastikan and sudah memiliki akun google adsense. Anda dapat membaca artikel-artikel berikut ini jika memang anda belum memiliki akun google adsense.

Baca juga:

• Cara Mendaftarkan Akun Google Adsense
• Rahasia Penulis Agar Pendaftaran Akun Google Adsense Diterima 100% (my story and experience)

Jika anda sudah memiliki akun google adsense, ambil kode iklan dari akun google anda dan parse terlebih dahulu sebelum kita memulai tutorial berikut ini. Anda dapat memparse kode iklan di SINI.

Berikut ini merupakan langkah-langkah memasang ataupun membuat iklan background di blog anda, cekidot:

• Setelah anda masuk ke akun blog anda, pilih dan klik 'Tema' > Edit HTML
• Salin (copy) code script di bawah ini sebelum code </head>. Anda dapat mencari kode </head> dengan menggunakan tombol CTRL + F, kemudian masukkan </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: #fff;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: -50px;
}
.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>

• Kemudian masukkan kode skript di bawah ini sebelum kode <div class='post-body entry-content'

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='paralax_div'>
  <div>
    <div>
      <div>
       >>Masukan kode iklan yang sudah di Parse<<
      </div>
    </div>
  </div>
<span class='clear'/>
</div>
</b:if>

• Ganti tulisan warna merah pada kode skript di atas. Kemudian simpan. 

Catatan: Perlu anda ketahui, jika penayangan iklan tidak berhasil, ada banyak kode <div class='post-body entry-content' di dalam edit html, cari kode lainnya seperti itu dan coba satu-persatu.

Bagikan Artikel ini