Membuat kotak texarea atraktif dengan fungsi Select all ||Blogger Tips||

Pujangga Blogs

19 January 2011

Membuat kotak texarea atraktif dengan fungsi Select all ||Blogger Tips||

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 comments:


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment