Berbagi INFO

membagi informasi dari berbagai sudut pandang

Cara Membuat Teks Area di Blogspot

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

Hasilnya akan nampak seperti dibawah ini

Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini
Keterangan :
rows = tinggi
cols = lebar

  • Pembuatan textarea dengan button / tombol higtlight

Untuk yang ini, adalah memudahkan pengunjung blog anda untuk memberi tanda hightlight

<input value=”Klik Tandai” onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button”/>Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini

Hasilnya akan nampak sperti dibawah ini.

Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak 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..

<span class=”hiddenSpellError” pre=””>Isi</span> teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini

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

Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini

  • 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..

<span class=”hiddenSpellError” pre=””>Isi</span> teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini

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

Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini

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

Januari 7, 2010 - Posted by | Tips / Trik, Tips Ilmu Komputer, tips untuk para blogger, Tips/Trik |

Belum ada komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: