CARA MEMBUAT TEXT BOX ATAU TEXT AREA DI BLOG



Hallo, apa kabar?
Jika pada postingan sebelumnya kita sudah membahas tentang CARA MENAMBAHKAN SLIDER PADA ARCHIVE BLOG, untuk postingan kali ini kita akan membahas tentang bagaimana cara membuat TEXTBOX atau TEXT AREA. 

Yang di maksud dengan text box adalah sebuah box atau area yang berbentuk persegi yang di dalamnya dapat kita gunakan untuk menempatkan sebuah text. Untuk lebih jelasnya lihat contoh gambar textbox pada gambar postingan di atas. 

Untuk fungsinya sendiri biasanya textbox di gunakan untuk menempatkan sebuah  text atau pun kode tertentu yang sekiranya penting agar lebih rapih dan mudah di lihat, selain itu textbox juga membuat tampilan blog kita menjadi lebih keren, hehe.

Sebelum ke proses pembuatan, saya beri contoh dulu beberapa variasi textbox dan kodenya di bawah ini :

1. Textbox paling sederhana.


Kode :
<textarea rows="5" cols="30">Your Text Here</textarea> 

Keterangan : kode yang berwana merah adalah kode yang bisa anda ganti-ganti. 
  • rows="5pengaturan untuk tinggi box.
  • cols="30" Pengaturan lebar box.
  • Your Text Here adalah text yang akan muncul di dalam box.

2. Read Only Textbox


Kode :
<textarea rows="5" cols="30" name="Privacy Policy" readonly="readonly">Your text here </textarea>

Keterangan : Pada dasarnya textbox ini sama dengan yang pertama, yang membedakan adalah tulisan yang ada di dalam textbox ini hanya bisa di Copy, Tidak bisa di Cut.


3. Textbox dengan pagar titik-titik

Your Text Here

Kode :
<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: center;">Your Text Here</div>



4. Textbox dengan pagar strip-strip

Your Text Here

Kode :
<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: center;">Your Text Here</div>

5. Textbox dengan pagar solid

Your Text Here

Kode :
<div style="background-color: white; border: 3px #1780dd solid; padding: 10px; text-align: left;">Your Text Here</div>


6. Textbox tanpa pagar (hanya baground)

Your Text Here

Kode :
<div style="background-color: #f3f3f3; padding: 10px; text-align: center;">Your Text Here </div>


Keterangan untuk kode Textbox 3, 4 , 5, 6 :


<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: center;">
Your Text Here</div>
  • kode berwarna merah adalah perimeter yang bisa di ganti/rubah.
  • Your Text Here adalah text yang akan tampil di dalam textbox.
  • background-color: white adalah warna background dari textbox.
  • border: 3px adalah ketebalan dari pagar.
  • #1780dd adalah warna dari pagar.
  • padding: 10px adalah tinggi dari textbox
  • text-align: center adalah perataan text yang ada di dalam textbox ( left/center/right )

Cara pemasangan Textbox :

1. Masuk ke blogger anda, buat Entry baru.
2. Pada Entry Editor rubahlah mode tampilan dari Compose ke HTML. Copy salah satu kode Textbox yang ada di atas kemudian Paste kan ke Entry editor. Jangan lupa rubah Your Text Here dengan Text anda.


3. Kemudian kembalikan lagi tampilan Entry dari HTML ke Compose.

Nb : Jika anda ingin posisi textbox berada di tengah, pada mode Compose posisikan dahulu Cursor di tengah (align center), rubah tampilan ke mode HTML kemudian pastekan kode textbox di samping kanan atau tepat di bawah kode <div style="text-align: center;"> . Untuk lebih jelasnya perhatikan pada gambar di atas.

Nah, kurang lebihnya seperti itulah langkah-langkah dalam membuat Textbox pada Blogger. Jika ada yang masih kurang jelas dan ada yang ingin di tanyakan, langsung saja tanyakan melalui kolom komentar di bawah atau bisa juga langsung ke kontak saya.

Selamat berkreasi, somoga bermanfaat, Terima Kasih..
loading...

2 Responses to "CARA MEMBUAT TEXT BOX ATAU TEXT AREA DI BLOG "

  1. Wahh Mantep Gan , Ane Udah Coba , Beda Sama Text Box yang lain , thanks ya

    ReplyDelete
    Replies
    1. sip gan,masama.. tengkyu atas kunjunganya

      Delete

Terima Kasih Sudah Berkunjung.. Jika berkenan silahkan berikan komentar Anda mengenai artikel atas.. Setiap Kritik ataupun Saran yang Anda berikan sangat berguna untuk perkembangan dan kemajuan Blog ini..