Belajar Seo, Tutorial Blog, Tutorial Dunia Internet

» » Cara Mudah Membuat Text Area Di Blog

Cara Mudah Membuat Text Area Di Blog

Oleh
Cara Mudah Membuat Text Area Di Blog ~ Bagaimana kabar anda semuanya sobat blogger ?, sering kita jumpai di blog-blog sahabat kita yang melihat ada pada postingan blog mereka sering kali memasang  text area atau dalam bahasa mudahnya seperti bentuk kotak atau tombol. dan biasanya sering digunakan untuk menaruh kode script html. 

Sebagai penambah pengetahuan buat anda yang belum tahu kali ini masih dalam tutorial blog, belajar seo akan sedikit berbagi ilmu kepada anda semuanya bagaimana cara membuat text area pada blog. langsung saja berikut tutorialnya :
.
Berikut Cara Mudah Membuat Text Area Di Blog lengkap dengan kode-kode HTML-nya :
http://purnamaseo.blogspot.com/

1. Tutorial Membuat Text Area dengan Tombol Highlight

Berikut adalah kode / code HTML untuk Text Area dengan Tombol Highlight    ;
<center><form name="copy"><input value="Copy" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa </textarea></form></center>
Hasilnya akan seperti berikut ;


Keterangan :
anda bisa mengganti lebar dan tinggi ukuran dari text area ini dengan merubah kode rows= untuk tinggi dan lebarnya cols= , silahkan anda sesuaikan dengan template sobat.

2. Tutorial Membuat Text Area dengan Onclick Hightligt

Sebenarnya jenis teks area ini, adalah sedikit pengembangan dari Text Area Tombol Highlight. Bedanya : kalau pada Text Area dengan Tombol Highligt ada tombol untuk men-select seluruh isi teks/menyorot semua isi teks. Maka, pada Text Area dengan OnClick Highligt tidak ada tombol, hanya fungsi select isi teks area berjalan secara otomatis, hanya dengan meletakkan pointer mouse Anda di dalam text area tersebut.

Berikut adalah kode / code HTML-nya :
<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa </textarea>

Hasilnya sebagai berikut :

Keterangan : rubah huruf yang berwarna merah untuk menyesuaikan lebar dan tinggi.

3.Tutorial Membuat Text Area dengan Tombol Scroll Vertikal

Text area jenis juga merupakan bentuk modifikasi dari kotak teks area standar. Bedanya, cuman ada penambahan scroll vertikel. Kode / code HTML-nya adalah sebagai berikut :
<div style="border: 2px solid; color: #999999; height: 100px; overflow: auto; padding: 10px; text-align: justify; width: 470px;">
Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</div>
Hasilnya sebagai berikut ;
Teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML







4. Tutorial Membuat Text Area dengan Tombol Scroll Horizontal
<div style="border: 1px solid; color: #999999; height: 40px; overflow-x: auto; overflow-y: hidden; padding: 10px; text-align: justify; width: 470px;">
<pre style="display: inline; margin-top: 0pt;">Isikan teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML
</pre>
</div>
Hasilnya sebagai Berikut :
Isikan teks sesuai dengan keinginan Anda, bisa juga menggunakan kode HTML

Catatan : Untuk memasukkan kode HTML dalam text area, maka Anda harus mem-parse dulu kode HTML yang ingin Anda masukkan dalam Teks Area / Text Area Okey, itulah mungkin yang dapat belajar seo share pada kesempatan ini. Semoga artikel ini dapat bermanfaat dan selamat mencoba.
0 Komentar untuk "Cara Mudah Membuat Text Area Di Blog"

Back To Top