Cuppylicious

Owner Stuff Entry

Tutorial : Cara Buat Text Box
Khamis, 17 Mei 2012 | 12:43 PG | 0 budak suka cupcake + pink
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 :






























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/AVvXsEiI_LuOrO06aaGQoOruFv9wNdiNMidoexayuzRlTwPNfZhkv7eLW4TuohLkd1J7zfzxvQoIhEXXOIfnUADlvx6Jie861a5lkJdvGeZ283UJIddes84XQo8MBD9qPnHbFsfRFvIsouYtX2c/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/AVvXsEiI_LuOrO06aaGQoOruFv9wNdiNMidoexayuzRlTwPNfZhkv7eLW4TuohLkd1J7zfzxvQoIhEXXOIfnUADlvx6Jie861a5lkJdvGeZ283UJIddes84XQo8MBD9qPnHbFsfRFvIsouYtX2c/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 di sini.


Selamat mencuba! :)





|
Photobucket
Annyeonghaseyo earthlings~ I am an alien. Follow this blog yaw!
So, you can always visit my tutorial~