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 Memasang Banner Iklan di Samping Kanan dan Kiri Blog

DEMO

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.

Bagikan Artikel ini