Cara Membuat Teks Area dan Variasi Text Area

Sebelumnya saya pernah membuat artikel tentang cara membuat text area dan modifikasinya, nah pada kesempatan ini, saya akan menambah lagi berbagai macam variasi teks area dan cara membuat text area tersebut.  Untuk apa sih teks area itu, selain untuk kerapian posting blog juga bermanfaat untuk menghemat halaman agar tidak terlalu penuh. Selain itu terkadang kita dalam mengcopy paste kode tertentu terkadang keluar jalur alias melewati batas area artikel blog. Hal tersebut terjadi karena kita cuma memasukkan kode-kode tersebut ke dalam blockquote. Nah disnilah fungsi utama dari teks area tersebut. 

Pada kesempatan ini saya akan memberikan 3 variasi teks area. yaitu text area sederhana / default, text area dengan fungsi select / copy all, dan text area dengan tombol scroll / gulir.

Cara memasang teks area ini adalah pada saat menulis postingan pilih menu HTML (bukan edit HTML template loh yaah). Lihat gambar. 

Masukkan kode text area setelah klik HTML

A. Teks Area Sederhana

<textarea rows="2" cols="35">diisi dengan kalimat, kata, kode yang diinginkan</textarea>

Dengan kode di atas maka tampilan teks area seperti di bawah ini. angka 2 berarti jumlah baris, 35 menunjukkan lebar form teks area.
diisi dengan kalimat, kata, kode yang diinginkan

B. Teks Area dengan Select Copy All 

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all</textarea></div>
</form>
</div>

Kode diatas adalah cara membuat dengan text area dengan perintah / fungsi select / copy all

Silakan sobat atur letaknya center artinya posisi text area ditengah, height > tinggi nya, width > lebar form teksnya.

Berikut ini adalah cara membuat teks area dengan copy / select all atau cara klik copy all

C. Teks Area dengan Tombol Scroll 

<div style="overflow: auto; height: 100px; background-color: #f2f2f2; text-align: justify; border: 1px solid #999999; padding: 5px;">Tulisan Anda...</div>

Beginilah tampilannya jika menggunakan kode diatas, silakan sesuaika background color dengan template sobat masing-masing. Intinya kode merah adalah silakan modifikasi sendiri. 

Ali Nur Ikhsan, Begitulah nama saya. terlahir dari keluarga yang sederhana tapi penuh dengan kebahagian, dalam artian walaupun banyak kekurangan di berbagai sudut, namun kebahagian dapat dicapai dengan rasa syukur. aktifas sebagai Mahasiswa IAIN Sunan Ampel Surabaya Fakultas Adab Jurusan Bahasa dan Sastra Arab. ketertarikan terhadap dunia IT semenjak saya pertama kali memegang komputer saat 2 SMA. bisa dibilang saya terlambat, tapi ngak ada yang ngak kata terlambat asal dia ingin bersungguh-sungguh dan jangan lupa tetap berdoa. saya ingat perkataan guru saya. ada tiga hal untuk mencapai kesuksesan: Kemauan, Kesempatan, dan kemampuan.

Demikian cara membuat teks area dalam postingan blog. Nah, bagaimana sobat, terserah anda mau pilih yang mana yang terbaik. silakan dicoba. Salam Blogger.
Lihat juga cara membuat kode tukar link yang hampir sama penerapannya.

Keterangan :

• width : lebar text area
• height : tinggi text area
• background-color : warna background text area
• text-align : perataan text
• padding : jarak antar tulisan
• border : tebal tipisnya garis tepi text area
• solid : warna garis tepi text area