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('fixedbanner');el.

parentNode.removeChild(el);' style='right: 5px;position: 

absolute;top: 5px;z-index: 99;'><img alt='' src='http:/

/3.bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/

40iIDnF32Nw/s1600/delete2.png'/></a>

hasil akhir menjadi :

<div id='fixedbanner'>
<a href='#' onclick='var el=document.

getElementById('fixedbanner')

;el.parentNode.removeChild(el);' 

style='right: 5px;position: absolute;

top: 5px;z-index: 99;'><img alt='' src='http://3.

bp.blogspot.com/-VkGc1slnj74/UOb46pZPv3I/AAAAAAAADqc/

40iIDnF32Nw/s1600/delete2.png'/></a>
<a href='URL Tujuan' title='Judul'>

<img alt='fixedbanner' src='URL Banner'/></a>
</div>

Semoga bermanfaat...By Vikar