Cara Membuat Banner Melayang di Kiri atau Kanan Blog

Pernah Kamu melihat sebuah Banner (Banner Sponsor) dalam sebuah blog yang selalu ada disaat kamu rooling bannernya tetap saja ada. Nah dalam kesempatan ini saya akan membagikan cara membuatnya. Caranya cukup mudah, tidak perlu ahli dalam menggunakan scipt, karena dalam tulisan saya ini sudah bisa dipraktekan di blognya kamu maupun di wesitenya kamu.

Pada Kesempatan ini saya akan memberikan Cara Membuat Banner Melayang di Kiri atau Kanan Blog , saya akan memberikan 2 alternatif yaitu dengan

"Menambah Widget HTML/JavaScript" atau "Edit HTML pada Template", silahkan pilih mana yang Kamu suka. Kalau saya lebih suka dengan "Menambah Widget HTML/JavaScript"  karena tidak terlalu repot.. . hehehe

Langsung saja pada Tips dan Triknya.

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), tambahkan kode ini setelah <div id='fixedbanner'> , kodenya yaitu:

<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/AVvXsEjh8PXtQcctrjKzLlguvzDCslN5W_QmYxbFedKHH1KMqLPUHJVPfa5wqG-Iz7NVwsO1STsabEHq0V3IF0dBrYC-RkBkR88kAzgxMPr7SKUX6KOuTtuKjq-mimKgjJCo2Wt_-dvXHGIyQa4/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/AVvXsEjh8PXtQcctrjKzLlguvzDCslN5W_QmYxbFedKHH1KMqLPUHJVPfa5wqG-Iz7NVwsO1STsabEHq0V3IF0dBrYC-RkBkR88kAzgxMPr7SKUX6KOuTtuKjq-mimKgjJCo2Wt_-dvXHGIyQa4/s1600/delete2.png'/></a>

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

</div>

Semoga Bermanfaat.