jendelablog.wordpress.com

budiscyan weblog area's

memberi background image pada comment box reply

Menambahkan latar belakang atau background pada comment box reply di halaman multiply anda sangatlah mudah.
Hanya diperlukan 1 (satu) block selector saja untuk memungkinkan hal ini terjadi.
Tutorial ini, sekali lagi diperuntukkan bagi mereka yang belum paham tentang masalah ini.
Bagi anda yang telah mampu melakukannya, saya sampaikan terima kasih apabila anda dapat memberikan masukan, agar tutorial ini membuahkan manfaat yang lebih baik.

Untuk menambahkan background pada comment-box reply ( textarea, tempat kita ngetikkan komen ), buka Custom CSS anda dan tambahkan block CSS berikut ini :

/* Basic selector to add background into textarea */
textarea#body {
background: #FFFFFF url(URL-alamat-gambar-anda) repeat scroll left top;
color: #000000;
}

penjelasan :

  1. textarea#body adalah selector untuk box isian dengan tag HTML <textarea /> yang berada pada ID body (ditulis #body), untuk merujuk ke textarea yang berada di body, ditulislah textarea#body . Maksudnya adalah, apabila ada perintah textarea yang berada di body maka
  2. muatlah gambar / image (background:) yang berada di alamat berikut ini url(URL-alamat-gambar-anda))dengan
  3. warna latar belakang putih (#FFFFFF) yang
  4. diulang, sehingga memenuhi semua latar belakang tempat ngetikkan komen (repeat) dan
  5. ikut scroll saat beserta foreground (text) saat text menggulung
  6. mulai pasang gambar pada posisi pojok kiri (left) atas (top)
  7. warna text, setel pada warna hitam (#000000)

Demikianlah pola dasar penempatannya.
Block selector ini, dapat anda kembangkan sehingga textarea (comment-box reply) anda sesuai dengan keinginan anda, seperti pengaturan border, besar font, type font dan lain sebagainya.

Contoh :
textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img527.imageshack.us/img527/1750/bluewater.gif) repeat scroll left top;
border: 2px solid #000000;
color: #000000;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #000000 url(http://img410.imageshack.us/img410/2496/langitmalam.gif) repeat scroll left top;
border: 2px solid blue;
color: #FFFFFF;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #000000 url(http://img15.imageshack.us/img15/7165/yingyanglw8.gif) no-repeat scroll left bottom;
border: 2px solid grey;
color: #FFFFFF;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img24.imageshack.us/img24/8265/beruangmo9.gif) no-repeat scroll center bottom;
border: 2px solid blue;
color: #000000;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img14.imageshack.us/img14/2956/mousecatgw2.gif) no-repeat scroll right bottom;
border: 2px solid blue;
color: #000000;
}
akan menghasilkan :

DK

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

Information

This entry was posted on 2 Maret 2009 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: