CARA MEMBUAT KODE HTML DI DALAM TEXT AREA

Posted by Sonin Sabtu, 29 Desember 2012 10 komentar
Cara Memasukkan Kode Html ke dalam Text Area (bentuk kotak) Dalam memasukkan kode html pada text area, barangkali anda pernah mengalami, atau selalu mengalami kegagalan karena kode atau teks yang dimasukkan tidak bisa tampak alias kosong. Karena itu pada postingan kali ini saya akan sedikit berbisik kepada anda agar anda bisa menampilkan kode html atau teks pada test area yang anda buat. Pertama, Kode HTML yang ingin di masukkan kedalam Text Area syaratnya ubah dulu menjadi HTML Encode. Untuk merubahnya langkah-langkahnya sebagai berrikut: 1. Copy code HTML kemudian masukkan ke HTML Encode 2. Pastekan atau tempelkan code HTML yang sudah di copy ke dalam kotak Encode input text 3. Klik tombol Encode tunggu sejenak sampai proses loading selesai 4. Berikutnya copy kode yang terrdapat pada kotak Encoded Output dan pastekan kepostingan sobat menggunakan Text Area. Kedua, Untuk kode Text Area anda bisa menggunakan berbagai bentuk kode text area dibawah ini.



Kode Text Area Biasa

<textarea rows="30" cols="6">
 Letakkan kode atau tulisan Anda disini Coy
 </textarea>

Hasilnya;

 

Kode Text Area Plus Tombol All Copy

<div>
 <form name="copy">
 <div align="center">
 <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>
 <div align="center">
 </div>
 <div align="center">
 <textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">
Letakkan kode atau tulisan Anda disini Coy
 </textarea>
 </div>
 </form>
 </div>

Hasilnya seperti dibawah ini 

Untuk memperindah text area anda, maka saudara bias menambahkan kode seperti dibawah ini, biar lebih kreen asal jangan kerempeng, heehee,

Contoh I


<textarea cols="30" name="code" rows="6" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya akan jadi seperti ini


 Contoh 2

<textarea cols="30" name="code" rows="6" style="-moz-border-radius: 7px 7px 7px 7px; background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; line-height: 1.5em; padding: 5px;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;
 

Contoh 3


<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;

 

Contoh 4

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;">ISI Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;



Demikianlah cara membuat kode text area dan contoh-contoh bentuk text area.
Catatan untuk merubah dan ukuran dan warna bisa anda modifikasi dengan cara mengedit kode-kode di atas,, sebab kkode di atas cuma sebatas contoh yang insyaAllah bermanfaat bagi para pengunjung blog ini, terutama yang belum tau dan atau bagi pengunjunng yang sudah lupa.


Baca Selengkapnya ....

CARA MEMASANG KODE HTML WARNA PADA BLOG

Posted by Sonin Jumat, 28 Desember 2012 0 komentar
Cara memasang widget kode html warna adalah melalui langkah-langkah berikut: 1. Pertama terlebih dahulu Login ke akun Blogger Anda. 2. Pada halaman Dasbor, silakan pilih blog Anda. 3. selanjutnya pada halaman overview blog Anda, silakan pilih templates. 4. dan Pilih edit HTML dan pilih Proceed dan jangan lupa centang Expands Widget template, agar jika terjadi kesalahan anda bisa kembali pada template sebelumnya 5. Copy Script di bawah ini dan paste di atas kode </head>
 

6. Kemudian setelah di Paste jangan lupa simpan template anda 
7. berikutnya silahkan paste kode dibawah ini, pada postingan baru anda lalu paste pada areal Edit HTML.

Maka Akan muncul Tampilannya sebagai berikut:
Kode warna yang terpilih :
ATAU COPY KODE DI BAWAH INI


MAKA KODE DI ATAS YANG ANDA PASTE AKAN BERBENTUK SEBAGAI BERIKUT;
Indah Bukan, jika indah dan bermanfaat bagi anda silahkan praktekkan,,,

Baca Selengkapnya ....

Popular Posts

Ilmu Blog dan SEO| Desain of DUNIA KOMPUTER.
Estimated worth website
Copyright © 2012 - Dunia Komputer - Desain by Sonin