Tampilkan postingan dengan label Belajar Membuat Area Text Serasa 3 Dimensi. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar Membuat Area Text Serasa 3 Dimensi. Tampilkan semua postingan

Senin, 28 Mei 2012

Membuat Kotak Kode / Text Area (Update)

Membuat Kotak Kode / Text Area (Update)

Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini.


Maksudnya menghias text area?


Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..).

Contoh text area biasa seperti ini :



dengan kode seperti ini :

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form>

**rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda.

Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini:

Menghias Text Area Contoh #1



Text area di atas:

  • Background berwarna kuning
  • Border berwarna biru (dot)
  • Warna Text Merah
  • Text bergaris bawah
Untuk kodenya copy kode di bawah ini :

<form><textarea rows="3" cols="30" background-color="green"
style="color: red; background-color: yellow; text-decoration: underline; border-style: dotted; border-color: blue">Text Anda Disini</textarea>
</form>

Menghias Text Area Contoh #2



Text area di atas:

  • Background berwarna Hijau
  • Border berwarna Kuning (solid)
  • Text Huruf Besar (Uppercase)
  • Warna Text Putih
Untuk kodenya copy kode di bawah ini :

<form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form>

Menghias Text Area Contoh #3



Text area di atas:

  • Background berwarna Biru
  • Border berwarna Merah (solid)
  • Text Tanpa bergaris bawah
  • Warna Text Kuning
Untuk kodenya copy kode di bawah ini :

<form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >Text Anda Disini</textarea></form>

Menghias Text Area Contoh #4



Text area di atas:

  • Background berwarna Hijau
  • Border berwarna gray/abu-abu(solid)
  • Warna text Putih dan berhuruf tebal
  • Kode terinstall/terblok otomatis
Untuk kodenya copy kode di bawah ini :

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" onmouseover="this.form.txt.select()" readonly ; style="color: white; background-color: green; font-weight: bold; border-color:gray">Text Anda Disini</textarea></form>

Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:)

Senin, 06 April 2009

Membuat Area Text Serasa 3 Dimensi


Membuat area text,bukan membuat text area,text area anda bisa baca disini.
Tapi yanhg akan kita bicarakan pada topik kali ini adalah membuat bidang/tempat area text seolah 3 Dimensi.
Contohnya anda bisa lihat di bawah ini :



Saya lagi belajar Membuat Area Text Serasa 3 Dimensi


Caranya sangat mudah sekali,ya..kita memerlukan bantuan CSS.Maksudnya?
Pertama,anda pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
Setelah itu cari kode:


<head>

jika sudah ketemu,letakkan kode berikut persis di bawah kode tersebut :

<style type='text/css'>
#tigadimensi{
background: #E8E8E8;
margin: 15px;
font-family:arial;
font-size:13px;
text-align:justify;
padding: 10px 15px 10px 15px;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #666666;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #666666;
}
#post
tigadimensi{
margin:.75em 0;
}
</style>


Setelah itu Simpan Template.
Selanjutnya,pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya tambah element baru,atau bisa juga langsung posting ke posting area,tuliskan kata yang ingin anda tampilkan nanti,gunakan kode berikut :

<div id='
tigadimensi'>Text Anda Disini
</div>

Simpan,dan lihat Hasilnya !

Baca Juga Yang Ini..