membuat text area

Jika kita sering berkunjung ke blognya para ahli blog seperti Blog Kang Rohman, Mas Fatih Syuhud, O-OM, dll (Maaf jika semuanya tidak sempat kesebut, namun saya mengagumi semua guru Blogger Indonesia), kita sering mendapati adanya postingan dan widget (biasanya widget untuk tukaran link) yang menggunakan text area untuk menampilkan kode HTML.

Kode HTML memang tidak bisa ditampilkan secara apa adanya di postingan kita, harus menggunakan kode-kode tertentu dan salah satunya adalah dengan menggunakan text area. Baca di sini jika anda ingin mengetahui bagaimana cara menampilkan kode HTML di postingan blog kita.

Seperti saya katakan sebelumnya bahwa, selain berguna untuk menampilkan kode HTML di postingan blog, kita juga bisa menggunakan text area sebagai tempat untuk menampilkan kode HTML link blog kita sehingga memudahkan pengunjung untuk meng-copy kode HTML tersebut. Trus, gimana donk caranya?

Untuk membuat text area sebenarnya sangat mudah, cukup copy kode dibawah ini dan paste-kan di postingan anda maupun di widget bar anda jika anda ingin menampilkan kode Link Exchange ke blog anda.


<p align="center"><textarea name="code" rows="6" cols="20"> Ganti tulisan ini menjadi kode HTML yang ingin anda tampilkan </textarea></p>

Maka hasil yang anda dapatkan akan seperti ini:

Ganti tulisan ini menjadi kode HTML yang ingin anda tampilkan

Saya mendapatkan versi atau model yang lainnya yang bisa anda gunakan. (Salut untuk Kang Rohman atas ilmunya yang sangat bermanfaat) Di sini saya juga akan memaparkan kembali, dan terus terang ini say adapt dari blog Kang Rohman, siapa tau anda juga belum mengetahuinya, jadi izinkan saya untuk membahasnya, OK. Peace!

Seperti yang saya katakan sebelumnya bahwa ada versi atau model lain yang bisa kita gunakan yaitu dengan menambahkan tombol Highlight All text area tersebut. Silakan copy kode dibawah ini untuk membuatnya:





<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"> Ganti tulisan ini menjadi kode HTML yang ingin anda tampilkan </textarea></p></div></form>

Maka hasil yang akan anda dapatkan adalah seperti gambar dibawah ini:

Ganti tulisan ini menjadi kode HTML yang ingin anda tampilkan

Bagaimana, semua pilihan ada di tangan anda. Untuk tulisan “Highlight All”dapat anda ganti sesuai dengan keinginan anda, misalnya “block semua” atau “Saya Ganteng” .
Nah, jika anda telah berhasil silakan berikan feed back pada saya untuk mngetahui bahwa postingan saya ini ternyata berguna juga. Namun, saya juga "newbie" di dunia perblogan, maka dari itu saya pun masih akan terus belajar dan jika kita hanya belajar saja, maka hal tersebut tidak akan ada gunanya jika kita tidak menerapkannya. 
Selamat Mencoba!