Jumat, Januari 01, 2010

Cara membuat kotak teks (text area) di dalam postingan blog

Terkadang di dalam postingan kita ingin buat kotak teks (text area), di dalam kotak teks bisa diisi dengan teks, link, banner, dll. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks (text box) tersebut. Kotak teks ini biasanya digunakan untuk membuat form untuk tukaran link dengan blog lain.Sebagai contoh di bawah ini adalah beberapa macam cara membuat kotak teks (text box) dengan script yang berbeda.


Contoh 1:
* Teks rata tengah = text-align: center; center bisa diganti dengan left, right,justify
* Background warna biru = background-color: rgb(0, 0, 240)  angaka 0 dan 240 bisa anda ubah sesuai keinginan (untuk mengubah warnanya)

Script: (dimasukkan di dalam postingan)

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: rgb(0, 0, 240); text-align: center;"><a href="http://artikelkomputerku.blogspot.com">Artikel Komputer</a></p>

Hasilnya:

<a href="http://artikelkomputerku.blogspot.com">Artikel Komputer</a>



Contoh 2:
* Teks otomatis rata kiri
* Background warna hitam = background-color: black; black bisa diganti dengan warna lain seperti white, red, blue, green, dsb, warna lainnya bisa dilihat disini daftar warna
* Link diisi hingga baris pertama penuh kemudian akan berpindah ke baris 2
*Tinggi kotak teks  100 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan

Script: (dimasukkan di dalam postingan)

<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 100px; background-color: black; "><br>
<a href="http://www.komputerseo.com/">Komputer SEO</a> <a href="http://mycomputerdummies.blogspot.com/">Dummies</a><br>
</div>





Hasil:


Contoh 3:

* Teks otomatis rata kiri
* Background transparan
* Link diisi per baris 1 link
*Tinggi kotak teks  200 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan
 Script: (dimasukkan di dalam postingan)


<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 200px; "> <br>
<a href="http://www.komputerseo.com/">Komputer SEO</a> <br><a href="http://mycomputerdummies.blogspot.com/" target="_blank">Dummies</a>
<br>
</div>

Hasil:


kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML"




Mudah-mudahan postingan ini bisa menjawab pertanyaan teman-teman yang sering menanyakan cara membuat form tukaran link di dalam postingan. Pertanyaan seperti ini sudah sering saya terima lewat email, namun baru sempat membuat postingannya. agar lebih memudahkan menjawab pertanyaan teman-teman. Jika masih ada yang kurang jelas silahkan di tanyakan di kotak komentar.





Artikel Terkait :



16 komentar:

Info lomba apa saja KOMPLIT!! mengatakan...

Tipsnya saya coba ya bang... makasihh

cerita lucu mengatakan...

hebat euy, lanjutkan!!!

pakar bisnis online mengatakan...

mantab gan infonya makasih, blogwalking

agusta27 mengatakan...

thanks berat sob

Mas. Bad mengatakan...

Terima kasih atas pengetahuannya, dan mohon berkenan untuk mampir dan memberikan link kembali ke blog saya. www.masbadblog.co.cc

vibiz mengatakan...

Kalo begitu saya akan mencobanya...

inovasimedia mengatakan...

makasih gan, saya dah coba dan berhasil

Anonim mengatakan...

Artikelnnya oke banget, saya belum sempat coba untuk buat text box pada postingan saya. Tapi nanti akan sy coba. Sy sdh bergabung di Google Friend Connect Blogmu Gan, bergabung juga Blogku ya. Blog Patrisia, Trims.

putu mengatakan...

krn bngt kunjngi jga di www.dewataweb.blogspot.com

Firman Fajar mengatakan...

Terima kasih infonya. Sudah saya coba dan berhasil.

Brillian Dwi P W S P mengatakan...

mantap gan

Info Toko Surya62 mengatakan...

Mantap Gan... numpang beken n keren ya..

Sunthree mengatakan...

tes tutorialnya semoga berhasil

Syauqi Cheat mengatakan...

bang ane lier nie maksudnye gimane

Syauqi Cheat mengatakan...

bang maksudnye ape ane ngangerti

Syauqi Cheat mengatakan...

pusing