Mungkin beberapa teman - teman blogger disini masih banyak yang ingin tampilan blog nya terlihat keren,atraktif dan profesional.Apalagi kalo web/blog tersebut bisa memberikan kesan wah kepada para pengunjung yang membuat mereka tertarik dan ingin tahu bagaimana cara untuk bisa mereka terapkan di halaman situsnya.
Hmmm...kalo begitu yuk,kita coba satu tutorial sederahana untuk menciptakan kesan itu dengan mencoba membuat kotak textarea.Pada tutorial ini kita akan mencoba membuat kotak textarea itu dengan effect onClick | onMouseover dan onMouseout.Jadi gambarannya ,disaat mouse melewati bagian dari textarea tersebut akan memberikan effect perubahan warna background ataupun gambar pada background. dan disaat mouse mengarah keluar dari textare akan kembali ke background asal.lalau..jika kita mengklik bagian dalam dari textarea nantinya akan menyeleksi semua text yang ada pada kotak tersebut.
Mari kita coba lihat contohnya seperti dibawah ini :
Kode CSS :
Untuk menerapkan effect textarea seperti diatas,tentu saja kita harus bermain main dengan CSS.Rangkain kode css tersebut bisa anda letakan langsung pada page element html blogspot, add a gadget » HMTL / javascript atau diletakkan pada posting halaman.Rekomendasi saya,baiknya anda letakan kode css dibawah ini pada bagian page element html saja.dan letakan pada bagian atas </b:skin>
Untuk merubah lebar textarea..silahkan rubah value : width:300px; sesuai keperluan anda.dan untuk merubah warna pada masing masing selector,silahkan ubah pada properties background-color :
.over {
background-color:#FF0000;
.out {
background-color:#FFFBDF;
.under {
background-color:#66CCFF;
Kode HTML dan Javascript :
Dibagian ini andapun bebas meletakan kode html dan javascript yang tentunya sesuai dengan keperluan anda.Kode yang akan kita pakai kali ini adalah sebagai berikut :
Untuk merubah tinggi text area ,silahkan rubah Properties : rows="9" atau anda bisa menambahkan properties height pada masing masing selector misalnya dengan menambahkan height:100px; ( nilai value sesuaikan dengan kebutuhan anda ) yang penting setiap selector mempunyai value yang sama, .out , .over , .under. Contoh :
.over {
background-color:#FF0000;
height:100px;
.out {
background-color: #FFFBDF;
height:100px;
.under {
background-color:#66CCFF;
height:100px;
Bila anda akan membuat pengulangan textarea pada halaman posting seperti pada artikel ini ,anda harus merubah id pada masing-masing textarea intinya pada bagian seperti contoh dibawah ini:
id="txtarea" onclick="SelectAll('txtarea');
Jadi ..bila anda akan membuat 2 textarea, ganti "textarea" dengan "txtarea1".begitupun seterusnya.
Dan yang terakhir...letakan kode javascript dibawah ini pada page HTML blogspot pada bagian atas tag </body> untuk menjalankan perintah:
Bila masih ada pertanyaan..silahkan tinggalkan komentar anda...semoga bermanfaat.
0 komentar:
Posting Komentar