4 Membuat Text Area

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Apa itu text area? 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 lebih memahamkan lagi contohnya lihat  disini atau image dibawah ini:

 

                                 image

Sudah lihat? Nah untuk membuat text area, silahkan sobat Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini</textarea></p>

Sedikit penjelasan tambahan: rows= menunjukkan tinggi text area, cols menunjukkan lebar dari text area. Silahkan sesuaikan sendiri angka-angka tersebut dengan keinginan anda!

Selain cara diatas ada cara lain lagi untuk membuat text area, yaitu text area dengan memakai hightlight Maksudnya text area yang kita buat dilengkapi tombol highlight, yang sekali klik semua text area terblok jadi memudahkan pengunjung untuk mengcopynya. Cara membuat text area dengan hightlight?

                                        image

Copy code berikut:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Hightlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disin</textarea></p></div></form>

Keterangan:

<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.

<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.

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.

<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.

<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;"

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.

Selesai!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

4 komentar :

  1. saya belajar juga buat teks area... saya mau buat posting juga yang mengandung contoh kode HTML...tapi pas saya posting ke blog...hasilnya malah kodenya dah dieksekusi.
    contoh :saya buat posting tentang kode teks area...saya buat dulu contohnya kemuadian dibawahnya contoh hasil eksekusi kode HTML tersebut, tapi setelah saya posting ke blog malah contohnya jadi kena dieksekusi dech....solusinya gimana ya mba?

    BalasHapus
  2. bismillaah

    klo ada ana minta link banner yang agak kecil aja biar pas klo di pasang di blog ana.
    jazaakillaah

    BalasHapus
  3. @ Subhan: Kalau mau mudah coba download dan ngebloglah dgn bantuan WLW.

    @ teweswell: Khn mudah aja tuh, rubah aja ukuran bannerx lebar/ width dan tinggi/ height

    BalasHapus
  4. Terimakasih infonya bossss

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!