Cara Buat Text Box

Biasanya text box digunakan untuk mempamerkan kod html banner, kod html widget, text atau apa-apa sahaja yang anda ingin kongsi dengan pengunjung blog.

Contohnya banner blog seperti yang ditunjukkan di bawah. Jika anda ingin bertukar banner dengan blogger lain, anda haruslah menyediakan kod html banner blog anda bagi memudahkan blogger lain mengambil kod banner tersebut untuk di pasang pada blog mereka. Untuk itu, penggunaan aplikasi text box adalah diperlukan.

 

Terdapat pelbagai jenis text box yang boleh anda pilih. Tiap-tiap jenis text box telah disediakan kod dalam kotak masing-masing, anda cuma perlu copy sahaja. Untuk "select all kod", hanya dengan sekali klik pada text box :

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>

<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;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI</textarea>


<textarea cols="20" name="code" rows="3" style="background: #DAFFBF; border: 2px #295F00 dashed; color: #295f00; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI</textarea>


<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;" onclick="this.focus();this.select()" >TEKS/KOD HTML ANDA DISINI</textarea>


<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>


<textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>


<textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>


<textarea name="code" rows="3" cols="20" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>


<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>


<textarea cols="20" name="Bptxt" rows="3" 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;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>

Untuk pasang text box ini pada blog, ikuti tutorial di bawah :

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript (atau boleh juga paste di ruang entri post)

3) Paste kod text box yang anda copy tadi pada ruang Html / Javascript

Contoh:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()">TEKS/KOD HTML ANDA DISINI</textarea>

 4) Pada tulisan berwarna merah di atas, gantikan dengan kod html banner anda/ text /apa sahaja kod yang anda ingin pamerkan dalam text box tersebut.

Contoh kod banner anda:

<center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3ucGHTwmBfARCWQ-mEgc4Iyo_Jnnjbg6-m2iTpxv7ObAalWX3AO3Zm2HH_9yuLwIUmrmpiaJ6dJU0ERRCXxznpUvkku_uU2fe5kEJTWkypKLuJCoP9WGr2GnGcT4BNlZmQDlrlhYOu8/s400/banner.png" /></a></center>

Rupa kod text box setelah dimasukkan kod banner akan jadi seperti ini:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #ffffff;" onclick="this.focus();this.select()"><center><a href="http://santaisini.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3ucGHTwmBfARCWQ-mEgc4Iyo_Jnnjbg6-m2iTpxv7ObAalWX3AO3Zm2HH_9yuLwIUmrmpiaJ6dJU0ERRCXxznpUvkku_uU2fe5kEJTWkypKLuJCoP9WGr2GnGcT4BNlZmQDlrlhYOu8/s400/banner.png" /></a></center></textarea>

4) Save dan lihat hasilnya.

Nota:

- Untuk ubah saiz text box, anda cuma perlu ubah nilai height dan width dalam kod tersebut.

-Warna background text box juga boleh diubah, gantikan kod #ffffff dengan kod warna yang anda mahu, pilih kod warna di bawah:
( untuk paparan lebih besar, klik di sini)

Selamat mencuba! :)