Cara Buat Textbox Dalam Blog

Membuat 'kotak' untuk apa sahaja yang anda ingin pamerkan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod atau mungkin juga lain-lain.

Contoh textbox sedia ada adalah textbox untuk code banner blog ini yang kelihatan di sebelah kanan blog ini.Textbox menjadikan code senang dicopy oleh pengunjung anda dan pada masa yang sama menampakkan kekemasan untuk meletakkan code dalam blog anda.
Cara Buat Textbox dalam blog


Tutorial ini akan menunjukkan kepada anda asas kepada textbox ini serta beberapa penambahan yang boleh dilakukan untuk memudahkan pemilik blog ataupun pengunjung.

Contoh kod yang hendak diletakkan didalam textbox adalah seperti berikut.
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank">
<img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" />
</a></center>



1. Asas bagi textbox adalah.
<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;">MASUKKAN KOD ANDA DISINI</textarea>


Note:
height: 100px; > Gantikan dengan ketinggian yang anda kehendaki
width: 200px; > Gantikan dengan lebar yang anda kehendaki
background: #8CEFFD; Gantikan warna background dengan kod tertentu. Untuk kod warna, rujuk disini.

Contoh bagi kod di atas.


2. Untuk buatkan semua kod tersebut di'select' dengan hanya sekali klik pada textbox. Kodnya adalah:
<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onclick="this.focus();this.select()" >MASUKKAN KOD ANDA DISINI</textarea>


Contoh textbox jenis ini adalah seperti berikut.


3. Untuk buatkan kod di'select' dengan hanya lalukan tetikus adalah seperti berikut
<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onmouseover="this.focus()" onfocus="this.select()" >MASUKKAN KOD ANDA DISINI</textarea>


contox textbox jenis ini adalah


Mudah bukan.?
Kini anda boleh meletakkan kod didalam blog anda dengan lebih mudah dan kemas.

Selamat mencuba.:)

29 comments:

  1. wau..thanks. dah lama saya cari tutorial ni.

    ReplyDelete
  2. cik kumbang,Fina Fento

    Sama².:)

    ReplyDelete
  3. saya selalu trtanya2 macam mana org yg selalu buat tuto,
    dia letak kod, pastu kod tu tak berubah pon.
    macam awak letak kod textbox tp kod tu tak brubah jd textbox.

    ReplyDelete
  4. thanks untuk tips ni...kadang2 miera wat tutorial, tak tao nk wat camne nk bg org copy paste kan kod..thanks sgt

    ReplyDelete
  5. Terima kasih atas panduan yang diberi..

    ReplyDelete
  6. JOM SERTAI KAMI DI FACEBLOG. RAMAI TELAH MENJADI AHLI. ANDA BILA LAGI? [ http://the-faceblog.blogspot.com ]

    ReplyDelete
  7. SAYA TAK FHM LAH MCM NE NAK BUAT PUAS SY CUBA FHM KAN,,TOLNG SY

    ReplyDelete
  8. salam..tolong..mcm mna nak dptkan,kod utk msuk kan kat text box tu..huhu..boleh ternagkan ngn detail x..??

    ReplyDelete
  9. mcm mne nk letak gmbr y diambil dr fb??kt kn snap dl ke thn upload?

    ReplyDelete
  10. Macam mana nak buat scroll box bergambar ? Boleh kann buat entri for tutorial nie .

    ReplyDelete
  11. nk tnye siket.... mcm mne nk buat ''the page at says'' ye ??

    ReplyDelete
  12. puas cuba fahamkn tp tak dpt2 gak...
    kod2 tu nk letak bah. mana ek? x brpa nk fhm la..

    ReplyDelete
  13. http://hafizah-hidayah.blogspot.com/

    ReplyDelete
  14. efan98-diriku.blogspot.com
    talong tinggal kan komen anda..
    pleazzzzzzzzzz...

    ReplyDelete
  15. syee x phm laa , ape bnde nie ? hehehe

    ReplyDelete
  16. a...kira nya..contoh la post kita nk post tu ada kod..lepas tu kod yg tuto bagi ni taruk la kat dlm post tu sekali...camtu ka??

    ReplyDelete
  17. site berinformatif untuk design aksesori blog.yer. I love it.

    ReplyDelete
  18. info yang sangat berguna.terima kasih

    ReplyDelete
  19. knp ye stp kali sy nak copy paste link kat html/javascript slalu x boleh nak save..walaupun sy dah click berkali2..

    ReplyDelete