CARA MEMBUWAT TEXT AREA DI BLOG

Sahabat Blogger ACC semua, saya ingin berbagi kepada sobat bagimana sih membuat texr area pada blog,oke saya harap dengan sedikit informasi dari saya ini bisa membantu saudara ACC khususnya dalam mengembangkan blog bagi pemula termasuk saya..hehehehhe....langsung aja ya gak usah pake kelamaan, saya akan mensharing tutprial blog bagaimana cara membuat text area pada blog.

Kalau kita membicarakan tentang text area banyak sekali variasianya dan beragam jenis text area,,,,,,oke gak apa walaupun berbeda tetap satu tujuan ya,,,,,,,oke...... ini sedikit turial blog semoga menjadi bekal tambahan sobat semua.langsung mari kita lanjutkan.......menuju ke TKP di bawah ini ya,,,perhatikan dengan baik bagaimana caranya dan jangan sampai salah....

Berikut adalah list-list-nya lengkap dengan kode-kode HTML-nya :

1. Tutorial Membuat Text Area dengan Tombol Highlight

Berikut adalah kode / code HTML untuk Text Area dengan Tombol Highlight

<center><form name="copy"><input value="Copy" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa </textarea></form></center>

Nah, nanti hasilnya kurang lebih akan tampak seperti berikut :

2. Tutorial Membuat Text Area dengan Onclick Hightligt

Sebenarnya jenis teks area ini, adalah sedikit pengembangan dari Text Area Tombol Highlight. Bedanya : kalau pada Text Area dengan Tombol Highligt ada tombol untuk men-select seluruh isi teks/menyorot semua isi teks. Maka, pada Text Area dengan OnClick Highligt tidak ada tombol, hanya fungsi select isi teks area berjalan secara otomatis, hanya dengan meletakkan pointer mouse Anda di dalam text area tersebut.

Berikut adalah kode / code HTML-nya :

<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa </textarea>

Nah, untuk hasilnya maka akan tampak seperti yang ada di bawah ini :

3.Tutorial Membuat Text Area dengan Tombol Scroll Vertikal

Text area jenis juga merupakan bentuk modifikasi dari kotak teks area standar. Bedanya, cuman ada penambahan scroll vertikel. Kode / code HTML-nya adalah sebagai berikut :

<div style="border: 2px solid; color: #999999; height: 100px; overflow: auto; padding: 10px; text-align: justify; width: 470px;">

Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML

</div>

Untuk Hasilnya, maka akan tampak seperti berikut ini :

Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML

5. Tutorial Membuat Text Area dengan Tombol Scroll Horizontal

Kembali lagi bahwa ini adalah modifikasi dari teks area yang sederhana, cuman ini ditambah dengan tombol scroll yang vertikel. Langsung saja, saya berikan kode / code HTML-nya. Langsung diaplikasikan saja sesuai dengan keinginan Anda. Kode HTML :

<div style="border: 1px solid; color: #999999; height: 40px; overflow-x: auto; overflow-y: hidden; padding: 10px; text-align: justify; width: 470px;">
<pre style="display: inline; margin-top: 0pt;">Isikan teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</pre>
</div>

Maka hasilnya nanti, akan tampak seperti di b awah ini :

Isikan teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML

Tambahan suplemet pengetahuan /info blog :

Anda dapat memodifikasi kode-kode HTML diatas seperti :

border : digunakan untuk memodifikasi border / garis pinggir text area. Ubah 1px mejadi 2px, 3px, dst...

height : digunakan untuk mengubah tinggi yang diinginkan, ubah sesuai kebutuhan dan keinginan Anda

width : digunakan untuk mengubah lebar dari text area yang Anda buat

Catatan :

Untuk memasukkan kode HTML dalam text area, maka Anda harus mem-parse dulu kode HTML yang ingin Anda masukkan dalam Teks Area / Text Area

Okey, itulah mungkin yang dapat ACC share pada kesempatan ini. Semoga artikel ini dapat bermanfaat dan selamat mencoba.

sumber : http://bloggermahir.blogspot.com/