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

26 March 2010

Membuat Gambar Melayang pada Blogspot

Administrator 26 March 2010 1
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.

23 March 2010

Membuat Text Field Dinamis

Administrator 23 March 2010 1
Membuat Text Field Dinamis
Ok, langsung saja saya perlihatkan contoh tampilan yang akan kita buat terlebih dahulu. Lihatlah kedua perbedaan dari gambar di bawah ini.

Pada gambar pertama, kita melihat kotak pencarian atau TextField pada Facebook terdapat tulisan Find People and More. Lalu pada gambar kedua, tulisan tersebut hilang. Hal ini dikarenakan terdapat sebuah action yang berasal dari klik mouse untuk menginputkan suatu data. Nah, pada kali ini kita akan mencoba membuat hal tersebut.

Dalam membuat TextField tersebut, tidaklah terlalu susah. Untuk membuatnya adalah sebagai berikut:
  • Buatlah TextField melalui editor HTML.
  • Setelah itu, pada code TextField tersebut, tambahkan beberapa baris code yang pada akhirnya akan menjadi seperti di bawah ini.
<input onblur='if (this.value == "") {this.value = "ketik keyword...";}'
onfocus='if (this.value == "ketik keyword...") {this.value = "";}'
onkeyup='(this.value)' value='ketik keyword...'/>
  • Setelah selesai, simpan code tersebut yang telah dituliskan pada editor menjadi extensi HTML.
  • Setelah selesai, sekarang coba buka file tersebut melalui browser yang anda miliki.
  • Selamat mencoba nyengir.