Cara Buat Textbox Dalam Blog

Membuat 'kotak' untuk apa sahaja yang anda ingin pamerkan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod atau mungkin juga lain-lain.

Contoh textbox sedia ada adalah textbox untuk code banner blog ini yang kelihatan di sebelah kanan blog ini.Textbox menjadikan code senang dicopy oleh pengunjung anda dan pada masa yang sama menampakkan kekemasan untuk meletakkan code dalam blog anda.


Tutorial ini akan menunjukkan kepada anda asas kepada textbox ini serta beberapa penambahan yang boleh dilakukan untuk memudahkan pemilik blog ataupun pengunjung.

Contoh kod yang hendak diletakkan didalam textbox adalah seperti berikut.

<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank">
<img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" />
</a></center>

1. Asas bagi textbox adalah.

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;">MASUKKAN KOD ANDA DISINI</textarea>

Note:
height: 100px; > Gantikan dengan ketinggian yang anda kehendaki
width: 200px; > Gantikan dengan lebar yang anda kehendaki
background: #8CEFFD; Gantikan warna background dengan kod tertentu. Untuk kod warna, rujuk disini.

Contoh bagi kod di atas.
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

2. Untuk buatkan semua kod tersebut di'select' dengan hanya sekali klik pada textbox. Kodnya adalah:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onclick="this.focus();this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

Contoh textbox jenis ini adalah seperti berikut.
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

3. Untuk buatkan kod di'select' dengan hanya lalukan tetikus adalah seperti berikut

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onmouseover="this.focus()" onfocus="this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

contox textbox jenis ini adalah
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

Mudah bukan.?
Kini anda boleh meletakkan kod didalam blog anda dengan lebih mudah dan kemas.

Selamat mencuba.:)