Cara Bikin Gambar Melayang

Mungkin anda agak sedikit bingung juga dengan apa itu gambar melayang, nah...biar lebih jelasnya silahkan liat screenshoot dibawah ini :


Dari screenshoot diatas, anda bisa lihat gambar icon YM yang ditunjuk dengan tanda panah itu. Nah...itu dia yang saya sebut dengan gambar melayang. Knapa disebut melayang, karena kalo anda scrool blog anda, maka gambar icon YM tersebut akan tetap berada dan terlihat seperti melayang diatas blog. Kalo ga percaya, silahkan anda coba sendiri dengan menggulung blog ini kebawah dan lihat apakah letak gambar YM itu berubah atau tidak.

Bagaimana cara buatnya, silahkan ikuti langkah2nya di bawah ini :

• Seperti biasa, anda login terlebih dahulu di blogger lalu menuju ke layout dan edit HTML


• Biar ngga bingung, jangan kasih tanda centang pada kolom expand template widget


• Setelah itu, cari kode ]]></b:skin> dan letakkan diatasnya kode CSS berikut :
  
  

  #gambar_melayang {
position:fixed;
_position:absolute;
top:-25px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

  
  Kode CSS diatas, akan menempatkan gambar anda berada di pojok kiri atas. Untuk merubah letaknya, silahkan ganti text yg berwarna merah. Kata left menjadi right untuk posisi disebelah kanan. Jika ingin posisi-nya dibawah silahkan ganti kata top dengan bottom


• Selanjutnya, cari kode tag </body> dan letakkan diatasnya kode html berikut :
  
  

  <div id='gambar_melayang'>
<a href='ymsgr:sendIM?miz_doc86'>
<img alt='Chat with me' border='0'
src='http://opi.yahoo.com/online?u=miz_doc86&m=g&t=8'
style='float: right; margin-top: 35px;'/></a>
</div>

  
  Kode yang berwarna merah adalah kode untuk menampilkan status icon ym saya. Untuk merubahnya menjadi status ym anda, silahkan ganti text yg berwarna merah tebal dengan id ym anda masing2. Selain itu, anda bisa mengganti gambarnya sesuai keinginan anda, bisa widget, link, dll. Dengan catatan, anda meletakkan script atau kode HTML-nya diantar tag <div id='gambar_melayang'> dan </div>


• Save Template dan Selesai.