Membuat Teks Area Keren

Membuat Teks Area Keren ini dilakukan biasanya ketika sobat semua sedang membuat postingan yang menaruh kode html, karena terkadang kode html tersebut terlalu panjang ke bawah sehingga menghabiskan ruang posting di blog sobat semua. Saya akan mencoba untuk share beraneka ragam untuk membuat teks area keren, di antaranya adalah

1. Text Area Biasa

2. Text Area dengan memakai HighLight /Select

3. Text Area Select Otomatis

4. Text Area Dengan Scroll Box

5. Teks Area Dengan Warna Backround
6. Teks Area Backround Gambar

1. Text Area Biasa

Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="5" cols="20" readonly>

Ganti tulisan ini dengan teks/ kode sobat

</textarea></p>

Keterangan :

rows="6", menunjukan tinggi dari text area.

Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :

Ganti tulisan ini dengan teks/ kode sobat

2. Text Area dengan memakai HighLight /Select

Highlight atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.

Untuk kodenya,copy paste di bawah ini :

<div>
<form name="Select All code">
<p
 align="left" style="margin-top: 0; margin-bottom: 0"><textarea 
style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" 
cols="55" readonly>

Ganti tulisan ini dengan teks/ kode sobat

</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">

Maka hasilnya akan menjadi seperti ini:

Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

jadi,jangan sampai dirubah ya :)

3. Text Area Select Otomatis

Sobat semua pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.

Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.

Untuk contohnya lihat di bawah ini letakan mouse sobat pada kotak teks area di bawah ini, yang mana setelah mouse diletakan disana akan memblok teks secara otomatis

Untuk membuatnya silahkan copy paste kode di bawah ini :

<div>
<form name="PujiantoroStyle">
<p 
align="left" style="margin-top: 0; margin-bottom: 0"><textarea 
style="width: 184; height: 120" name="txt" rows="100" cols="55" 
onmouseover="this.form.txt.select()" readonly ;>

Ganti tulisan ini dengan teks/ kode sobat

</textarea></p>
</form></div>

4. Text Area Dengan Scroll Box

Dan yang terakhir adalah dengan menambahkan scroll, ini adalah contohnya:

Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

<div style="border: 2px solid solid lightblue; height: 100px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px. </div>

Untuk praktisnya, anda dapat meng-copy yang di bawah ini:

<div style="border: 2px solid #000000; height: 100px; margin-left: 20px; overflow: auto; padding: 3px; text-align: left; width: 320px;">Text anda disini</div>

Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

lightblue adalah nilai warna border.
Text-align memiliki 4 value: left, center, justify, dan right.

Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan bentuk scroll text blog yg diinginkan.

Untuk bagian posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.

Have a nice experiment and be creative.

5. Teks Area Dengan Warna Backround

Teks area ini keren sob karena dengan menambahkan warna backround. Berikut ini adalah contohnya:

Teks area Bagian 1

Teks area Bagian 2

Teks Area Bagian 3

Teks Area Bagian 4

Teks Area bagian 5

Teks Area Bagian 6

Teks Area Bagian 7

Teks Area Bagian 8

Teks Area Bagian 9

Teks Area Bagian 10

Berikut ini kode dari kesepuluh teks area di atas :

Teks area Bagian 1

<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;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks area Bagian 2

<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 TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 3

<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;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 4

<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;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area bagian 5

<textarea cols="30" name="code" rows="6" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"><br />ISI TEKS AREA SOBA DISINI</textarea>

Teks Area Bagian 6

<textarea cols="30" name="code" rows="6" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 7

<textarea cols="30" name="code" rows="6" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 8

<textarea cols="30" name="Bptxt" rows="6" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% white; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 9

<textarea cols="30" name="Bptxt" rows="6" style="-moz-border-radius-bottomright: 15px; background: none repeat scroll 0% 0% yellow; border-left: 20px solid red; color: black; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 10

<textarea cols="30" name=Btxt" rows="6" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

6. Teks Area Backround Gambar

Yang ini lebih keren lagi sob karena teks area ini di lengkapi dengan backround gambar

Copy paste kode di bawah ini untuk dapat membuat teks area di atas:

<textarea div="" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #000 url(http://sl.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat scroll right bottom; border: 2px solid rgb(245, 219, 0); color: white; height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 358px;">Tuliskan Teks atau Kode HTML di sini</textarea>

Copy paste kode di bawah ini untuk dapat membuat teks area di atas:

<textarea div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(250, 246, 250) url(http://dl3.glitter-graphics.net/pub/664/664343slv150mpvq.gif) no-repeat scroll right bottom; border: 2px solid rgb(245, 219, 0); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 358px;">Tuliskan Teks atau Kode HTML di sini</textarea>

Copy paste kode di bawah ini untuk dapat membuat teks area di atas:

<textarea div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQKTnpbJcS8vuFzpqnjQItXTFkBv5L_kZQbppDg_VcNaBb7_eOKQPm5pyIu-LZzHr49RM-MGIceZvhrq4AVg8UiI1AkYZqajY51MdnWgCQytU6qfNbGYpSZuJpYva9iHB3CpjXlHs1zY/s1600/Lightning.gif) no-repeat scroll right bottom; border: 2px solid rgb(245, 219, 0); height: 100px; overflow: auto; padding: 5px; color: #fff; text-align: justify; width: 358px;">Lokasi Teks atau Kode HTML Kalian</textarea>

Copy paste kode di bawah ini untuk dapat membuat teks area di atas:

<textarea div="" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDvXrufNl-45L6tgj1tWQ3al6Xn55K4kit0khLtCAlBXExI3VLCPz71RdK8FT0n5vVE2IHb4O3d4zZyPDc_8uNlv8sNbVEY4h38alBMeQwWvfH7ZORGIZOHiDAjeU3SYtUd9ZVkAWODk4/s1600/24c60yc.jpg) no-repeat scroll right bottom; border: 5px solid #146125; height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 358px;">Tuliskan Teks atau Kode HTML di sini</textarea>

Selanjutnya terserah sobat mkasih background gambar apapun. Selamat mencoba dan berkreativitas :) Semoga dapat bermanfa'at

{ 0 komentar... read them below or add one }

;)

;;-)

:-/

:-*

=((

:-O

B-)

:-S

#:-S

7:)

:((

:))

/:)

=))

O:-)

:-B

:-c

:)]

~X(

:-h

:-t

8-7

I-)

8-|

L-)

:-a

:-$

[-(

:O)

8-}

2:-P

(:|

=P~

:-?

#-o

=D7

:-SS

@-)

:^o

:-w

7:P

2):)

X_X

:!!

\m/

:-q

:-bd

^#(^

:ar!

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

Membuat Teks Area Keren

Ditulis Oleh : Unknown ~ Turitorial Blog

{ 0 komentar... read them below or add one }

Entri Populer

Arsip Blog

Members