Mohon maaf, mungkin terdapat beberpa artikel yang contohnya tidak ada dan tidak dapat didownload bahkan sudah tidak dapat diterapkan. Hal ini dikarenakan artikel tersebut ditulis babaerapa tahun lalu (jadul).

26 March 2010

Membuat Gambar Melayang pada Blogspot

Apa seh itu gambar melayang? Gambar melayang adalah suatu gambar atau bisa juga kita buat suatu widget yang selalu terlihat pada halaman blog. Misalnya saja, ketika kita menuju ke halaman bawah suatu blog, maka gambar atau widget tersebut selelu terlihat. Hal tersebut dikarenakan bahwa gambar itu sebenarnya berada pada bagian depan blog yang asli. Maksudnya, pada blog tersebut terdapat 2 bagian, bagian 1 adalah bgian dimana kita melihat, membaca bahkan memberi komentar yang sangat umum kita lihat. Sedangkan bagian 2 adalah bagian yang berada di depan bagian 1 tadi.Jadi istilehnya bagian 1 ditindis oleh bagian 2. Masih bingung? langsung aja kita coba ya nyengir.
Dalam pembuatan gambar melayang, ada beberapa hal yang harus dilakukan, diantaranya adalah :
  • Login-lah dengan id blogspot anda.
  • Lalu pilih Tata letak/Layout -> Edit HTML
  • Setelah itu, carilah ]]></b:skin> yang berada pada halaman tersebut.
  • Letakkan code berikut di atas code ]]></b:skin>
#xinthinx {
  position:fixed;
  _position:absolute;
  top:0px;
  left:5px;
  clip:inherit;
  top:expression(document.documentElement.scrollTop + document.documentElement.clientHeight-this.clientHeight);
  _left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}
  • Untuk mengatur tempat gambar tersebut melayang, anda hanya mengganti nilai top dan left pada code di atas.
  • Setelah itu, sekarang cari kode </body> lalu letakkan kode berikut diatasnya (contoh berikut adalah menampilkan id yahoo messenger).
<div id='xinthinx'>
  <a href='ymsgr:sendIM?id_cahoo_anda'>
  <img border='0' src='http://opi.yahoo.com/online?u=id_yahoo_anda&amp;t=6' style='float: right; margin-top: 35px;' title='Chat sama aku yuk'/></a>
</div>
  • Untuk mengganti sesuatu yang akan ditampilkan, anda harus memasukkan kode di antara <div id='xinthinx'> dan </div> dengan syarat, anda diharuskan memiliki kemampuan dasar html.
  • Setelah itu, pilih Simpan/Save Templete pada tombol di bawah Edit HTML.
  • Jika sudah, coba sekarang anda buka browser anda, sudah tampilkah?
  • Selamat Mencoba nyengir.

1 comment:

  1. wahh bloh dicoba nih..
    kang kunjungi blog saya juga kang.. mgkn ada yg brmanfaat..
    http://daveboy77.co.cc/

    ReplyDelete