Cara Membuat Banner Iklan Melayang di Samping Kanan dan Kiri Blog

Untuk kalian yang memiliki tampilan blog minimalis dan ingin memasang banner iklan di sisi kanan dan sisi kiri blog bisa mengikuti langkah-langkahnya pada artikel ini.

Untuk bisa memasang iklan pada samping kanan dan kiri blog, kita perlu membuatnya dengan sedikit bantuan kode JavaScript.

Space banner iklan di samping kiri dan kanan ini dibuat melayang agar ketika di scroll bisa mengikuti terus atau bisa juga di sebut dengan sticky.

Selain itu, banner iklan ini juga di lengkapi dengan tombol close untuk memudahkan pengunjung menutup atau menyembunyikan iklan tersebut jika memang dirasa tidak perlu atau menggangu.

Iklan melayang di samping kanan dan kiri blog ini bisa Anda gunakan untuk menampilkan iklan banner, bisa juga digunakan untuk menampilkan iklan AdSense.

Pada umumnya iklan banner ini berukuran 160px x 600px atau biasanya disebut dengan jenis iklan Skyscraper. Selain ukuran tersebut Anda juga bebas menggunakan ukuran berapa saja, asalkan tidak menutupi atau menghalangi artikel atau konten di blog Anda.

Baca juga: Cara Membuat Kotak Banner Iklan di Blog

Perlu Anda ingat kembali, jenis iklan banner melayang di samping kanan dan kiri blog ini cocok untuk blog yang memiliki tampilan minimalis, sangat tidak di rekomendasikan jika digunakan pada blog yang memiliki tampilan wide atau full hingga samping karena bisa menghalangi pembaca.
Cara Membuat Banner Iklan Melayang di Samping Kanan dan Kiri Blog

Cara Memasang Banner Iklan di Samping Kanan dan Kiri Blog


1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript > Copy dan Paste kode dibawah ini.
<style scoped='' type="text/css">
#iklankirikanan{position:fixed;_position:absolute;top:0;right:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}
</style>
<script type="text/javascript">
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close1(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="iklankirikanan">
<div style="text-align: right;">
<a href="" onclick="close1(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisF582C10EdoYMKzw8Zk4e7Z7wrwH_jgJo-THNQZe1-_de62Zkk_NbzzN6xTW3DBQvYpNe3W6gIrCGIDz57Ie-G6BGga7AywtgjlVdAjo8-iM4mKZfw4k1sL53jmUWd4Ocp4h9ymMCXyLh/s1600/close-btn.png" /></a></div>
<div onclick='close1()'>
<div style="background: #fff;">
<a target="_blank" href="LINK-TUJUAN" title="Iklan"><img style="border: none;" alt="Iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNsqX8k0JbCw7KU0lUAMAfbEFwh4BsaTcfauFXfrtDsH73LkUwh5Riy-eF0A_AEiNw5C5DhjpVIi4pUYrXwDqraOyvQf1rYGmHtAnk2uh_WqJeQVaKxLqrxqQzehNhbQBxH78kzFG1Iin/s1600/ban-melayang.gif" title="Iklan" width="160" height="600"/></a></div>
</div></div>
<style scoped='' type="text/css">
#iklankirikanan1{position:fixed;_position:absolute;top:0;left:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}
</style>
<script type="text/javascript">
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close11(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan1").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="iklankirikanan1">
<div style="text-align: left;">
<a href="" onclick="close11(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisF582C10EdoYMKzw8Zk4e7Z7wrwH_jgJo-THNQZe1-_de62Zkk_NbzzN6xTW3DBQvYpNe3W6gIrCGIDz57Ie-G6BGga7AywtgjlVdAjo8-iM4mKZfw4k1sL53jmUWd4Ocp4h9ymMCXyLh/s1600/close-btn.png" /></a></div>
<div onclick='close11()'>
<div style="background: #fff;">
<a target="_blank" href="LINK-TUJUAN" title="Iklan"><img style="border: none;" alt="Iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNsqX8k0JbCw7KU0lUAMAfbEFwh4BsaTcfauFXfrtDsH73LkUwh5Riy-eF0A_AEiNw5C5DhjpVIi4pUYrXwDqraOyvQf1rYGmHtAnk2uh_WqJeQVaKxLqrxqQzehNhbQBxH78kzFG1Iin/s1600/ban-melayang.gif" title="Iklan" width="160" height="600"/></a></div></div></div>

3. Kemudian edit pada kode yang sudah di tandai, ganti dengan Link Iklan dan Gambar Iklan milik Anda.
4. Klik Simpan.

Code by Arlina Design

Catatan:
Jika Anda ingin menggunakan iklan AdSense, silahkan masukkan kode iklan AdSense dibawah kode
<div style="background: #fff;">
Kemudian hapus kode ini:
<a target="_blank" href="LINK-TUJUAN" title="Iklan"><img style="border: none;" alt="Iklan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNsqX8k0JbCw7KU0lUAMAfbEFwh4BsaTcfauFXfrtDsH73LkUwh5Riy-eF0A_AEiNw5C5DhjpVIi4pUYrXwDqraOyvQf1rYGmHtAnk2uh_WqJeQVaKxLqrxqQzehNhbQBxH78kzFG1Iin/s1600/ban-melayang.gif" title="Iklan" width="160" height="600"/></a>

Itulah artikel mengenai cara membuat banner iklan melayang di samping kanan dan kiri blog, semoga bermanfaat.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

8 Komentar untuk "Cara Membuat Banner Iklan Melayang di Samping Kanan dan Kiri Blog"

  1. Patut dicoba nih.

    Anyway gak bikin blog jadi berat kan?

    BalasHapus
    Balasan
    1. Silahkan coba pasang di blog kalau memang butuh slot iklan di samping kiri atau kanan blog.

      Kode ini cukup ringan dan tidak membuat loading blog jadi lama.

      Hapus
  2. Wahh udah nggak pasang banner iklan lagi akuh
    Nice info

    BalasHapus
  3. Keren tampilan banner iklan melayang-layang seperti itu.
    Cuman blogku belum ada iklan.

    BalasHapus
  4. Mas, btw tombol closenya kok tdk berfungsi ya?

    BalasHapus
  5. mau tanya pak. Saya coba pasang di template fitrah press kok gak muncul ya? padahal pakai tampilan dekstop/pc

    BalasHapus
    Balasan
    1. Coba update kode jQuery nya ke versi terbaru, kalau belum ada tinggal pasang saja kode jQuery baru

      Hapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel