Cara Membuat Text Area di Halaman Blog -- Anda pasti sering melihat gambar
seperti di bawah. Space atau kolom
berbentuk kotak berfungsi sebagai kontainer tulisan atau kode HTML. Dilengkapi
fungsi scroll, ia dapat memuat
tulisan atau kode-kode yang sangat panjang. Dan untuk memudahkan melakukan copy
secara akurat, ia bisa diberi fungsi highlight.
Di dunia blog itulah yang
kita sebut Text Area.
Text Area tampil seperti
halaman dalam halaman. Fungsinya, selain untuk menghemat ruang dan menjaga alur
tulisan tetap mengalir dan tidak semberawut, text area juga sering dibutuhkan
untuk menyimpan kode HTML yang tidak bisa ditulis langsung ke dalam postingan
di dalam blog.
Jika anda ingin tau cara membuat text area, ikuti langkah-langkah berikut.
Jika anda ingin tau cara membuat text area, ikuti langkah-langkah berikut.
Text Area tanpa Highlight (Standard)
Untuk
membuat text area standard (tanpa fitur highligt),
langkah-langkahnya adalah:
1. Copy kode di bawah ini, dan paste-kan di halaman posting mode
HTML. (Ingat... bukan di halaman posting biasa atau compose, tapi di halaman posting mode HTML).
<p align="center"><textarea
name="code" rows="2" cols="15"> Tulis sesuatu di sini yang ingin ditampilkan di dalam text
area </textarea></p>
Tempatkan lokasi kode sesuai dengan lokasi text area yang anda butuhkan.
2.
Ganti tulisan berwarna merah dengan tulisan
yang ingin anda munculkan di dalam text area.
3.
Sesuaikan
angka “rows” dan angka “cols”. Angka "rows"=3 menunjukkan tinggi
dari text area, dan angka cols=”15”
menunjukkan lebar text area. Anda bisa mengganti lebar dan tinggi text area
sesuai kebutuhan.
4.
Jika
sudah, anda bisa beralih ke halaman Compose dan lihat hasilnya. Selesai!
Text Area dengan tombol
Highlight
Seperti
disebutkan di atas, text area juga bisa ditambah dengan tombol Highlight untuk memudahkan melakukan copy secara akurat. Dengan hanya menekan
tombol highlight seluruh isi text
area akan tersorot atau terblok. Selanjutnya tinggal dicopas sesuai keperluan.
Fungsi tombol ini sangat berguna untuk mencegah tertinggalnya satu atau
beberapa isi dari text area.
Langkah-langkahnya
adalah:
1. Copy kode HTML yang berikut ini:
<div><form name="copy"><div
align="center"><span><input
onclick="javascript:this.form.txt.focus();this.form.txt.select();"
value="Highlight All" type="button"> </span></div><p
align="center"><textarea style="width: 150px; height:
80px;" name="txt" rows="5" wrap="VIRTUAL"
cols="20">Tulis sesuatu di
sini yang ingin ditampilkan di dalam text area</textarea></p></form></div>
2. Paste-kan di halaman posting mode HTML sesuai lokasi text area yang anda inginkan.
3.
Ganti tulisan berwarna merah dengan tulisan
atau kode script yang ingin ditampilkan
di dalam text area.
4.
Selesai dan lihat
hasilnya di halaman compose.
Sebelum kita tutup, berikut
ini beberapa penjelasan tambahan mengenai kode HTML di atas jika anda ingin
melakukan perubahan tampilan text area.
1. <div
align="center"> ==> maksudnya
posisi tombol akan berada di tengah. Ganti kata ”center” dengan ”left” atau
”right” jika posisi tombol ingin pindah ke kiri atau ke kanan.
2.
Value="Highlight
All"
==> tulisan ”Highlight All” adalah tulisan
yang akan muncul di dalam tombol. Anda bisa merubahnya dengan kata lain sesuai
keinginan.
3.
<p
align="center"> ==> ini menunjukan posisi text area
berada di tengah. Robah kata “center” dengan “left” atau “right” jika ingin
menempatkannya di kiri atau di kanan.
4.
<text
style="WIDTH: 150px"> ==> ini menunjukan lebar dari text
area = 150 pixel, silahkan robah sesuai kebutuhan, misalnya : "WIDTH:300px;"
5.
HEIGHT: 80px ==> menunjukan tinggi text area =80 px, silahkan
robah dengan tinggi yang diinginkan. Misal : HEIGHT:120px.
Demikian
tips dan cara sederhana dalam membuat text area. Terimakasih sudah berkunjung dan jangan lupa tinggalkan komentar. Semoga
bermanfaat!!!
_________________
_________________
info yang sangat bermanfaat
ReplyDeletethanks gan
btw saya sudah follow blog nya dari G+, mudah-mudahan di follow kembali
salam dari http://gustilubis.blogspot.com
mantap dah artikelnya kawan
ReplyDeletetrimakasih infonya gan ,main balik ke http://gedungjayamusik.blogspot.co.id/
ReplyDeleteok di tunggu gan
Makasih ya gan atas informasi nya
ReplyDeletemakasih
ReplyDeleteterimakasih
ReplyDelete