Cara Membuat Text Area di Blog
Posted by Unknown at Monday, September 28, 2015
Sebagai blogger, Anda pernah mempublikasikan artikel yang berisi teks panjang atau kode html yang panjang. Ketika mempublikasikan mungkin Anda pernah menuliskan teks, kutipan maupun kode html yang begitu panjang atau memang dikhususkan untuk disalin oleh pengunjung blog. Sebagai contoh dalam penulisan kode html yang sangat panjang, tentu akan memakan ruang di blog dan juga formatnya sulit untuk diatur sehingga terkesan tidak rapi dan tidak nyaman dibaca. Untuk menangani hal tersebut ada solusinya, yaitu menggunakan text area atau area yang dikhususkan untuk teks. Text area adalah sebuah area/kolom yang dibuat sebagai kontainer (untuk memuat) tulisan atau kode html di dalam suatu postingan blog. Selain sebagai kontainer text biasa, text area juga bisa ditambahkan dengan fungsi highlight untuk memudahkan pengunjung melakukan penyalinan seluruh isi di text area tersebut.
Berikut adalah cara untuk membuat text area di blog:
1. Buka blogger.com dan login ke dalam akun blog Anda.
2. Pilih buat entri baru atau edit entri lama.
3. Pindah ke menu edit HTML.
4. Salin dan tempelkan kode script text area.
Sebelumnya ada beberapa model text area, antara lain model text area biasa dan text area dengan highlight. Anda dapat memilihnya sesuai dengan kebutuhan Anda. Berikut adalah model-model text area tersebut:
Text Area Biasa
Ada dua parameter yang perlu diperhatikan. Pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Parameter kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area. Apabila jumlah baris yang diketik lebih panjang dari yang disediakan maka text area akan menampilkan scroll secara otomatis.
Berikut adalah contohnya:
Text Area dengan Highlight Text area juga bisa dibuat dengan menambahkan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam text area. Ini akan membantu pengunjung blog jika ingin menyalin keseluruhan isi text di text area yang terlalu panjang dengan lebih cepat.
<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: 95%; HEIGHT: 300px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">ISI DENGAN TEXT YANG DIINGINKAN</textarea></p></div></form>
Kode di atas mempunyai dua bagian utama, yaitu yang membuat fungsi highlight dan yang membuat fungsi text area. Dari semuanya ada beberapa kode yang bisa diubah yaitu:
Berikut adalah contohnya:
Text Area dengan Auto Highlight saat Diklik
<div style="text-align: center;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">ISI DENGAN TEXT YANG DIINGINKAN</textarea></div>
Berikut adalah contohnya:
Text Area dengan Auto Highlight saat Didekati Mouse
<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">ISI DENGAN TEXT YANG DIINGINKAN</textarea></div>
Berikut adalah contohnya:
Berikut adalah cara untuk membuat text area di blog:
1. Buka blogger.com dan login ke dalam akun blog Anda.
2. Pilih buat entri baru atau edit entri lama.
3. Pindah ke menu edit HTML.
4. Salin dan tempelkan kode script text area.
Sebelumnya ada beberapa model text area, antara lain model text area biasa dan text area dengan highlight. Anda dapat memilihnya sesuai dengan kebutuhan Anda. Berikut adalah model-model text area tersebut:
Text Area Biasa
<p align="center">
<textarea name="mytextarea" rows="5" cols="40"readonly="">ISI DENGAN TEXT YANG DIINGINKAN</textarea></p>
Ada dua parameter yang perlu diperhatikan. Pertama adalah cols, yang berarti jumlah karakter yang ditampilkan per baris. Parameter kedua adalah rows yang berarti jumlah baris yang akan ditampilkan oleh text area. Apabila jumlah baris yang diketik lebih panjang dari yang disediakan maka text area akan menampilkan scroll secara otomatis.
Berikut adalah contohnya:
Text Area dengan Highlight Text area juga bisa dibuat dengan menambahkan fungsi highlight, di mana fungsi ini akan menyorot semua text yang berada di dalam text area. Ini akan membantu pengunjung blog jika ingin menyalin keseluruhan isi text di text area yang terlalu panjang dengan lebih cepat.
<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: 95%; HEIGHT: 300px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="">ISI DENGAN TEXT YANG DIINGINKAN</textarea></p></div></form>
Kode di atas mempunyai dua bagian utama, yaitu yang membuat fungsi highlight dan yang membuat fungsi text area. Dari semuanya ada beberapa kode yang bisa diubah yaitu:
Height: 300px yang menyatakan tinggi text area anda nantinya.
Width: 95% yang menyatakan lebar dari text area.
Value="Highlight All" adalah text yang akan ditampilkan pada tombol.
Anda dapat menggantinya dengan kata lain, misalnya Pilih Semua, Blok
Semua, dsb.
Berikut adalah contohnya:
<div style="text-align: center;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">ISI DENGAN TEXT YANG DIINGINKAN</textarea></div>
Berikut adalah contohnya:
Text Area dengan Auto Highlight saat Didekati Mouse
<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">ISI DENGAN TEXT YANG DIINGINKAN</textarea></div>
Berikut adalah contohnya:
0 comments: