Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea>&lt/p>

Sebagai contoh :

Keterangan : rows=”6″, menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka ” 6 tadi dengan angka yang lebih tinggi nilainya.

Cols=”20″, menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka ” 20 ” tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Highlight All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

  1. <div align=”center”> –> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
  2. <input onclick=”javascript:this.form.txt.focus();this.form.txt.selec()”> –> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
  3. Value=”Highlight All” –> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

  1. <p align=”center”> –> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
  2. <text style=”WIDTH: 300px”>–>kata “WIDTH:300px” menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: “WIDTH:700px;”
  3. HEIGHT: 144px –> angka “144px” menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan &lt/HEAD> selamat mencoba.

21 April 2007 - Posted by | blog tutorial

29 Komentar »

  1. mas, pas bgt nih lg sy cari. Sy pingin bikin spt ini dgn teks kode HTML template sy (xml template) tp gak bisa dipublish, error terus. Plis bantuin yah, thx bgt sebelumnya.

    Komentar oleh ati | 8 Juni 2007 | Balas

  2. To ati : kalau pake XML malah lebih mudah. sig in, klik Layout, klik Page Element, klik Add a page Element, KLik Add To Blog di bawah tulisan HTML/JavaScript, masukan kodenya, Trus save…selesai

    Komentar oleh rohman | 8 Juni 2007 | Balas

  3. useful blog

    Komentar oleh William "Adam" Rose | 9 Oktober 2007 | Balas

  4. makasih mas… masih awam nih saya di dunia blog he he he mas atawa akangnya??? urang sunda ning ๐Ÿ™‚

    Komentar oleh shan-blogs | 19 November 2007 | Balas

  5. Testing

    Komentar oleh Kevin | 19 Desember 2007 | Balas

  6. artikel yang bagus
    salam kenal

    Komentar oleh Dink donk | 16 Januari 2008 | Balas

  7. makasih kang rohman tipsnya udah saya pake di blog saya.mohon dikunjungi ya sekalian tukar link

    Komentar oleh radick | 2 Februari 2008 | Balas

  8. Salam kenang Kang…
    Trims atas tutorial cara membuat text area-nya. Udah tak coba dan berhasil, tapi aku kok belum berhasil bikin button spt Kang Rohman buat (Blog|Tutorial)???? Bisa kirim resepnya Kang.

    Komentar oleh My Princess Amanda - Adinda | 22 Maret 2008 | Balas

  9. Makasih banget atas resep bikin ‘teks area’nya. saya sangat terbantu

    Komentar oleh farikhy | 4 April 2008 | Balas

  10. iya mas…. cuman kalo misal nya kita mau copy kalimat atau syntax dari notepad trus kita letakkan di antara [textarea]…….[/textarea] pasti keluar nya [/br]….

    gimana cara menghilangkan nya..
    please reply to here nvsbl_mode@yahoo.com.sg

    Komentar oleh Oby_One | 10 April 2008 | Balas

  11. Iya tuh mas. kalau buat list pasti ada tag (/br) nya. Gimana aturnya?

    Komentar oleh BENY HIRMANSYAH | 29 April 2008 | Balas

  12. mas kalo nulis kode HTML/ XML tapi dengan back ground seperti tutorial yang kang rohman punya giman tuh caranya.Nuhun ………….

    Komentar oleh Dede Ariyanto | 13 Mei 2008 | Balas

  13. selamat mala

    Komentar oleh maisarah | 14 Mei 2008 | Balas

  14. selamat malam saya bingung sekali membuat komentar apa karena sulit sekali membuat blog……….wassalamualaikum..wr.wb

    Komentar oleh maisarah | 14 Mei 2008 | Balas

  15. kang..ijin copy paste tutorial nya yah..
    ^_^

    Komentar oleh FerrYLiu | 2 Juni 2008 | Balas

  16. Makasih mas udah kasih tau. semoga ilmu dan ide mas ga mati dan kalau bisa kasih ilmunya yang baru-baru ya . makasih

    Komentar oleh AttaufiQi ciSuM | 11 Juni 2008 | Balas

  17. untuk text area dengan tambahan background warna kayanya sy pernah baca, apa linknya sdh di pindah kang?

    Komentar oleh Nakinisa | 23 Juni 2008 | Balas

  18. thanks alot kang…
    trus gmana carane bikin area blog selebar blognya akang nih… aku gak dapet2 tutornya diblognya akang ini… minta tolong nih…. thanks berat….

    Komentar oleh Azhoeck | 28 Juni 2008 | Balas

  19. by the way..
    sy sudah dapat sendiri solusinya…
    stlah sy acak2.. akhirnya dapat..
    makasih skali lagi…thanks…

    Komentar oleh Azhoeck | 28 Juni 2008 | Balas

  20. thx y mas…sgt terbantu tpi sya ga2l wktu mw pasang emotions dipostingan blog…mngkn ad kesalahan ntar sya cba lgi…

    Komentar oleh detailz.blogspot.com | 3 Juli 2008 | Balas

  21. kalo bikin textarea tapi dalemnya ada link punya temen (bukan scriptnya yang keliatan) gimana?

    Komentar oleh nyarinama | 5 Juli 2008 | Balas

  22. wih mantap nih triknya kang..

    oiya kang salam kenal…saya baru aja uat blog, tentunya saya banyak belajar dr blog ini, trims bgt ๐Ÿ˜€

    oiy cara naikkan pagerank itu naro link d komentar y ? oke de sy nitip y kang

    http://info-dunia-it.blogspot.com/

    Komentar oleh Rizky | 10 Juli 2008 | Balas

  23. saya dari malaysia, wah saya sangat suka blog saudara.

    Komentar oleh Anonymous | 26 Juli 2008 | Balas

  24. bener ada
    nya.Piye ngilangine mas..posting dong..

    Komentar oleh mumets | 29 Juli 2008 | Balas

  25. halo kang Rohman… saya sudah coba pake yang highlight dan berhasil…. trimakasih kodenya dan blog ini memberiku banyak inspirasi. trimakasih

    Komentar oleh herdhyn | 2 Agustus 2008 | Balas

  26. Ini yang saya cari cari .. ee ada disini ..
    Ijin ngelink ke sini yah. Jadi kalau saya mau bikin lagi, gak lupa tutorialnya dimana ..
    Makasih …

    Komentar oleh kuyus_is_cute | 8 Agustus 2008 | Balas

  27. wah nemu juga akhirnya thanks banget kang

    Komentar oleh Joe Spyder | 14 Agustus 2008 | Balas

  28. manstab, matur sembah nuwun om ๐Ÿ˜€

    Komentar oleh Babi Ngepet | 19 Agustus 2008 | Balas

  29. terimakasih atas infonya.

    Komentar oleh I 4 N | 26 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: