2009-03-01

cara membuat teks area ( text area )

[x] Skip this

Pujangga Bird Farm :
Bagi pecinta dan penggila Burung merpati tinggian berkelas, silahkan kunjungi www.pujanggapati.com untuk mendapatkan Tips dan info seputar burung merpati tinggian.. dan tersedia juga merpati indukan, merpati bakalan, accessories dan berbagai macam jamu tradisional untuk merpati

Kontak : Bapak Kristiono Mursalim. Hp : - Website : www.pujanggapati.com

[+/-] Detailnya..masa aktif iklan : 10 jan 2014

Untuk kesempatan kali ini saya akan memberikan contoh cara pembuatan text area ( teks area ) untuk blogspot anda. Tapi sebelum saya langsung memberikan contoh pembuatannya.. ada baiknya saya akan jelaskan terlebih dahulu kegunaan dari teks area ini. Jika anda adalah seorang bloger, maksudnya orang yang suka ngeblog dan sering melakukan blog walking ( keliling keliling dari satu blog ke blog lainnya ) sangat cocok sekali jika anda menyiapkan teks area di blog anda yang berisikan tag pembentuk link yang menuju blog anda... tau kan cara membuat link..? kalo belom tau silahkan klik disini dan anda pelajari sebentar.. Nah setelah anda bisa membuat link buat blog anda sendiri ada baiknya jika link blog anda yang barusan anda buat anda suguhkan kepada pengunjung blog anda dengan menggunakan teks area ini, pasti dech pengunjung blog anda yang ingin bertukeran link dengan anda pasti tidak terasa kerepotan karena sudah anda siapakan. Nah udah taukan apa manfaat teks area..?, contoh yang barusan saya gambarkan barusan adalah cuman sebagai contoh aja dan bisa anda kembangkan dan manfaatkan lebih lanjut lagi...

Sekarang waktunya kita untuk praktek, langsung aja lihat contoh yang pertama dibawah ini, karena dalam pembuatan teks area nantinya akan saya bagi menjadi beberapa tingkatan yang mempunya functional tersendiri.. ni dia contohnya..

  • Pembuatan teks area standar / default
<textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>


Hasilnya akan nampak seperti dibawah ini


Keterangan :
rows = tinggi
cols = lebar
  • Pembuatan textarea dengan button / tombol higtlight
Untuk yang ini, adalah memudahkan pengunjung blog anda untuk memberi tanda hightlight

<center><form name="copy"><input value="Klik Tandai" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea></form></center>


Hasilnya akan nampak sperti dibawah ini.



  • Pembuatan teksarea dengan onclick hightligt
Untuk contoh yang ini hampir sama dengan textarea yang ada button hightlighnya, cuman bedanya yg tanpa menggunkan bantuan form.. nah untuk mencobanya silahkan anda klik pada halaman teksarea contoh hasil dibawah ini..

<textarea rows="5" cols="25" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>


Hasilnya akan nampak seperti dibawah ini..., anda klik aja di bagian teksareanya


  • pembuatan textarea sensitif hightlight
Untuk teks area yang ini fungsinya hampir sama dengan teks area yang barusan dicontohkan diatas ini, tapi lebih sensitif, maksudnya ketika mouse berada di wilayah teks area walaupun tanpa ngeklik tapi suda ter hightlight sendiri, ni dia contoh codenya..

<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>


Hasilnya akan nampak dibawah ini, letakkan mouse anda di wilayah teks area dibawah ini agar menegetahui efek hightlight nya..



Oiya.. hampir lupa, kalo ingin merubah lebar dan tinggi tampilan textarea silahakn ganti angka angka pada kata " rows " dan " cols "

Nah contoh contoh diatas adalah sebagai contoh aja dan sebagai pembelajaran dan bisa anda kembangkan sendiri sesui dengan fungsional nya..
Moga aja membantu yah, n kalo masih bingung atau bahkan sudah berhasil membuat ini dan ingin koar koar disini juga silahkan.. monggo mas.. hehehe..
Sampai jumpai di tutorial tutorial yang menarik lainnya di http://master-blog-ayiek.blogspot.com ini


Gabung di Facebook penulis

Klik Disini Untuk Baca Tutorial Lainnya

Berkomentar Sambil BerIklan Gratis Disini..?

Masukkan Email Untuk Berlangganan :

29 comments:

  1. siang om,...
    wahh pass bgt nieh artikel, dr smlm aku mikir gmn yahh caranya... trus pagi td aku masuk seet... ternyata udah ada om,...
    tengkyu om...

    ReplyDelete
  2. weh weh weh.... ini dia...artikel yang sangat berguna utk nambah2 ilmu ngeblog saya. terimakasih banyak k mas...
    senang sekali maen2 ke blog ini..

    ReplyDelete
  3. weh weh weh.... ini dia...artikel yang sangat berguna utk nambah2 ilmu ngeblog saya. terimakasih banyak k mas...
    senang sekali maen2 ke blog ini..

    http://formula-oke.blogspot.com/

    ReplyDelete
  4. Mas caranya nuli syntax html agar kebaca jadi teks biasa gimana? kalo aku nulis syntax link misalnya, yang keluar pasti link itu, padahal aku kan pengen buat tutorial... Jadi yang keluar adalah teks biasa yaitu semua syntax yang aku tulis tadi

    ReplyDelete
  5. Hallo mas Ayiek !!! lam kenal nich !!
    Aku dari http://pelajaran-blog.blogspot.com/

    aku nyolong artikelnya ya..tentang read more..:D
    Tukeran Link yuuk!!
    Oh ya,artikel yang aku publikasikan disini :
    http://pelajaran-blog.blogspot.com/2009/02/membuat-read-moreselengkapnyabaca.html

    Minta izinya ya..;)

    ReplyDelete
  6. makasih nih infonya. kuliah blogger dah ada lagi niy. ada buku gratis lho.

    ReplyDelete
  7. thanks mas..aku banyak belajar dari blog ini..

    ReplyDelete
  8. wah bermanfaat buanget nich tutorialnya. maksih om..

    ReplyDelete
  9. Very Good Post
    www.mnewsalert.blogspot.com
    www.supirscience.blogspot.com

    ReplyDelete
  10. makasih om berguna bangtz nch bgi newbie

    ReplyDelete
  11. alhamdulillah dapet info tentang blog bagus ini dari temenku... tks banget!

    ReplyDelete
  12. makasih yah tipsnya...bermanfaat bgt tuh..
    once again..tengkyu yah

    ReplyDelete
  13. Terima kasih ilmunya sangat bermanfaat..

    ReplyDelete
  14. Wah, infonya sangat bagus nih, luar biasa.

    ReplyDelete
  15. Tutorial text areanya lengkap sekali, terima kasih dah share :)

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. O iya, klo mau juga buat isi artikel blog dalam textarea, kamu bisa lihat di blog saya di sini

    ReplyDelete
  18. wah lagi-lagi nemu artikel menarik nih..... :D

    sepertinya harus bookmart situsnya nih ;)

    ReplyDelete
  19. lama g mampir nieh om,
    berkunjung skalian mo ngenalin blog baru... :D

    ReplyDelete
  20. mantaaap...
    Btw gimana cara buat komentarnya kaya gitu ada nama dan urlx...

    ReplyDelete
  21. mantaaap...
    Btw gimana cara buat komentarnya kaya gitu ada nama dan urlx...

    ayead.blogspot.com BLOGNYA ANAK GAPTEK

    ReplyDelete
  22. teerimakasih ........ sob ternyata setelah ane coba langsung berhasil... makasih sekali lagi.

    ReplyDelete
  23. terima kasih infonya mas ,sangat membantu sekali.salam blogger.....

    ReplyDelete
  24. Tutorialnya mantab gan.... sukses buat agan...

    ReplyDelete
  25. Tips bikin teks area ini bagus, terima kasih tipsnya.

    ReplyDelete

Berkomentar sambil beriklan ( iklan baris ), mau ga..?
So.. jadilah orang PERTAMA yang berkomentar, blog anda akan di lihat banyak orang.....
Tapi perlu diingat,.. DILARANG SPAM / KOMENTAR SAMPAH, bercanda / guyonan oke.. spam no...!
Spam / Sampah akan saya hapus tanpa ampun...

 
Close [X] .
dua langkah bikin widget recent post generator blog anda
mau bikin kayak gini, caranya klik disini