Membuat Banner Melayang di Kiri atau Kanan Blog

Membuat Banner Melayang di Kiri atau Kanan Blog - Mungkin sobat pernah melihat blog yang memasang banner melayang di samping kiri atau kanan blog. Artinya, banner tersebut tetap diam pada tempatnya walaupun mouse di scroll ke bawah. Dalam istilah lain disebut fixed banner.

Ide postingan ini, saya dapatkan ketika mengunjungi web muslim.or.id, ada banner penjualan buku yang mengarah ke pustaka.muslim.or.id. Dari situlah muncul ide untuk membuat postingan ini. Walau pun mungkin telah banyak tutorial seperti ini, dengan kode yang berbeda. Untuk melihat penampakan dan demonya silahkan lihat  gambar di bawah.

DEMO

Banner yang dipasang, bisa mengarah ke situs bisnis kita, ataupun mengarah ke postingan yang ingin selalu di tampilkan. Oke, simak cara mudahnya sob !

Membuat Banner Melayang di Kiri atau Kanan Blog

Pada tutorial ini saya memberikan 2 alternatif yaitu dengan "Menambah Widget HTML/JavaScript" atau "Edit HTML pada Template", silahkan pilih mana suka :)

A. Dengan Menambahkan Widget

Buat widget baru HTML/JavaScript, edit dan simpan kode ini

<style type="text/css">
#fixedbanner {
 position: fixed;
 top: 160px; /* Jarak dari atas */
 right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}
</style>
<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

B. Dengan Edit HTML pada Template

1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Simpan kode ini di atas ]]></b:skin>

#fixedbanner {
 position: fixed;
 top: 160px; /* Jarak dari atas */
 right: 0; /* Apabila ingin di kanan ganti right menjadi left */
}

4. Edit dan simpan kode ini di atas </body>

<div id='fixedbanner'>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

5. Simpan Template.

Menambah Tanda Close (X)

Apabila ingin menambahkan tanda Close (X) seperti pada demo, tambahkan kode ini sebelum <div id='fixedbanner'>

<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Bq41HxtVTeY9L7Y_PSrlq0KPGCRdWesAIpqMTskg1EQF4Kn1BRZSG7wEHOQnb4O1CItePlwHaNrMeSdVA0zoM1I3Bm4UFfCrTGhFBCnJ8SFphQFZOT2DpPTjIUum7sgO-81YElHN_j0/s1600/delete2.png'/></a>

hasil akhir menjadi :

<div id='fixedbanner'>
<a href='#' onclick='var el=document.getElementById(&apos;fixedbanner&apos;);el.parentNode.removeChild(el);' style='right: 5px;position: absolute;top: 5px;z-index: 99;'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Bq41HxtVTeY9L7Y_PSrlq0KPGCRdWesAIpqMTskg1EQF4Kn1BRZSG7wEHOQnb4O1CItePlwHaNrMeSdVA0zoM1I3Bm4UFfCrTGhFBCnJ8SFphQFZOT2DpPTjIUum7sgO-81YElHN_j0/s1600/delete2.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a>
</div>

Semoga bermanfaat...