2-Bersaudara

Diposting oleh : D E B I Posted on Jumat, 08 Maret 2013 - 3:40 AM with 2 comments

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5rePR3nrKfh0M89qYe6UcXDCC-rScOK_95dGkWtB8oL62B4suicPf4Lt_EmiK9GmANyTWsgX6cCd06PWJeNGrgx_NH0CUQ5vr0ecig1Px7oAjrlh3g9ryDhVsxEwhsxjG-t2lo0tzhMg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5rePR3nrKfh0M89qYe6UcXDCC-rScOK_95dGkWtB8oL62B4suicPf4Lt_EmiK9GmANyTWsgX6cCd06PWJeNGrgx_NH0CUQ5vr0ecig1Px7oAjrlh3g9ryDhVsxEwhsxjG-t2lo0tzhMg/s1600/delete2.png'/></a> <a href='URL Tujuan' title='Judul'><img alt='fixedbanner' src='URL Banner'/></a> </div>

Semoga bermanfaat...

Sumber : http://blog.kangismet.net

Share this Article on :