Script TextArea untuk menampilkan Code HTML/Java Script di Posting Blogger

Download Artikel : Script TextArea untuk menampilkan Code HTML/Java Script di Posting Blogger dalam format PDF

TextArea merupakan area atau tempat dalam halaman blog/web, bisa dalam posting maupun dalam sidebar untuk menampilkan script khusus seperti code HTML dan JavaScript, karena apabila deretan code HTML yang kita buat dituliskan langsung tanpa tag untuk textarea, maka browser akan langsung menterjemahkannya sebagai output dari coding tersebut.

Misalnya, suatu saat, kita ingin berbagi link banner dengan blogger lain. Tentunya, kita harus menampilkan kode HTML/Java Script untuk banner tersebut agar bisa di copy-paste ke blog/web mereka.

Contoh Banner yang linknya akan di share ke Blogger lain

Cara membuat textarea dari: Contoh TextArea-1 adalah sebagai berikut:
Ketik saja script seperti ini: (Copy-Paste)

<form name="highlight"><div align="left"><textarea id="contoh" rows="3" cols="13" name="contoh" wrap="virtual">DI SINI KETIK KODE HTML YANG AKAN DIMUNCULKAN DI POSTING</textarea><input value="Select" onclick="javascript:this.form.contoh.focus();this.form.contoh.select();" type="button"/></div></form>

Misalnya membuat textarea untuk kode html link Banner blogku...:

<form name="highlight"><div align="left"><textarea id="contoh" rows="3" cols="13" name="contoh" wrap="virtual"><a href="http://budisetiadarma.blogspot.com" target="_blank"> <img border="0" alt="Budi-Sd Blog " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_5aHS_zmR7cVRQZ2hq6L1GacWF5oe7qVECkqC-4bVEUSL1eWzE_qlC7rKbTDUnsyr92V-W_iUern881XBr96SXu4pNkNeMT6atWpGITCfdMZgLq_OXFdKmYF_nTbePROzpSlH4KQyETI/s175/budi--sd.png"/></a><br /> </textarea><br/><input value="Select" onclick="javascript:this.form.contoh.focus();this.form.contoh.select();" type="button"/></div></form>

Contoh TextArea -2
Untuk memunculkan di dalam Posting yang di dalamnya terdapat code HTML dari banner blogku (http://budisetiadarma.blogspot.com)

<a href="http://budisetiadarma.blogspot.com" target="_blank"> <img border="0" alt="Budi-Sd Blog " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_5aHS_zmR7cVRQZ2hq6L1GacWF5oe7qVECkqC-4bVEUSL1eWzE_qlC7rKbTDUnsyr92V-W_iUern881XBr96SXu4pNkNeMT6atWpGITCfdMZgLq_OXFdKmYF_nTbePROzpSlH4KQyETI/s175/budi--sd.png" /></a>

Cara membuat textarea dari: ContohText Area -2 adalah sebagai berikut:
Ketik saja script seperti ini:

<textarea name="textarea" rows="5" readonly="true" style="width:400px">DI SINITULIS ATAU COPY-PASTE CODE HTML YANG AKAN DIMUNCULKAN DI POSTING</textarea>

Misalnya membuat textarea untuk kode html link Banner blogku...:

<textarea name="textarea" rows="5" readonly="true" style="width:400px"><a href="http://budisetiadarma.blogspot.com" target="_blank"> <img border="0" alt="Budi-Sd Blog " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_5aHS_zmR7cVRQZ2hq6L1GacWF5oe7qVECkqC-4bVEUSL1eWzE_qlC7rKbTDUnsyr92V-W_iUern881XBr96SXu4pNkNeMT6atWpGITCfdMZgLq_OXFdKmYF_nTbePROzpSlH4KQyETI/s175/budi--sd.png" /></a></textarea>

Penjelasan:

rows
Untuk mengubah jumlah baris, ganti saja angka yang tertera disebelah kanan rows sesuai jumlah baris/tinggi area yang diinginkan.
Misalnya:
rows="5" berarti text area hanya memunculkan text sebanyak 5 baris, atau tinggi text area tersebut setara dengan tinggi 5 baris.

widht
Untuk mengubah/menentukan besar lebar dari textarea yang kita buat.
Misalnya:
style="width:400px" berarti lebar text area yg kita buat sebesar 400pixel
tips: jika kita tidak tahu, atau belum faham berapa lebar dari area posting blog kita, maka sebaiknya, tulis saja pada width nya dengan tulisan 100%
Contoh:
style="width:100%"
Sehingga nantinya lebar dari textarea akan secara automatic menyesuaikan dengan lebar maximum dari area posting atau sidebar yang dipasangi kode textarea...

Download Artikel : Script TextArea untuk menampilkan Code HTML/Java Script di Posting Blogger dalam format PDF (Adobe Reader)

Umh.. belum meng-install Adobe Reader di komputermu ?
Klik link di bawah ini untuk Donlot Adobe Reader

Mudah-mudahan bermanfaat... :))