Sunday, February 22, 2009

Tips Memberi Background Image pada Comment/Replies Box

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 :

Selamat bereksperiment, semoga sukses.
Enjoy.

67 comments:

  1. dmana tempat taruh Code CSS nya ini?
    bebas?

    ReplyDelete
  2. cari dulu pakai Ctrl+F di browser, jika ketemu, ganti.
    Jika belum ada, akan memudahkan jika ditaruh/ditempatkan di akhir CSS anda.

    ReplyDelete
  3. klo bole nanya ukuran box commentnya brapa?

    ReplyDelete
  4. ukuran box, sembarang.
    asal lebih besar dari background-nya.
    estetika saja, akan aneh jika gambar besar dimasukkan ke kotak yg kekecilan.

    ReplyDelete
  5. untuk qoute, ada selector sendiri. Class yang dipakai : .quotet
    di quote group ini memakai default MP / SKYLINE, bisa anda ubah alamat URL-nya dan penempatannya sesuai kaidah penempatan background.
    .quotet {
    background:#FFFFFF url(http://images.multiply.com/common/misc/gray-white-fade-horizontal.gif) repeat-y scroll -25px -25px;
    }
    ganti repeat-y -25px -25px sesuai keinginan.

    ReplyDelete
  6. udah..
    thx bro^^
    td aq jadiin middle jd posisinya ditengah deh..
    hatur nuhun,,

    ReplyDelete
  7. Terima kasih atas pencerahannya, Mas Lilok. Ini sangat berguna.

    ReplyDelete
  8. thx bgt atas infonya....langsung saya pake ya...^^

    ReplyDelete
  9. wah...bagus..bagus..bagus..
    hatur nuhun infona

    ReplyDelete
  10. to:dangdutkoplo :::::
    w mo nya sih guestbook classic dibeningin dikit [opacity75%] , pa codenya sama ? w pake style CustomColours
    soalnya w suka bgt ma yg transparant2 gitu dah.....

    ReplyDelete
  11. 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;
    opacity: 0.50;
    }
    akan menghasilkan :

    ReplyDelete
  12. Terima kasih mas lilok
    atas tambahan ilmunya

    ReplyDelete
  13. Terima kasih kembali & semoga bermanfaat.

    ReplyDelete
  14. maksudnya hiden gimana ?
    GB beliau masih bisa dilihat tuh.

    ReplyDelete
  15. saya hanya melihat, kalo pointer didekatkan, gambar berubah.
    dari gambar :



    menjadi :

    ReplyDelete
  16. om, imagenya klo dr photobucket bs gk sih??
    dr td nyoba kok gagal terus yah??

    ReplyDelete
  17. dari image-hosting manapun OK.
    coba anda pasang linknya di sini, jika gambar ada dan bisa untuk public / shared pasti bisa.

    ReplyDelete
  18. wah..udah jd gambar niy..
    bs kebaca gk yah??

    ReplyDelete
  19. akan saya taruh di posisi tengah yaa :

    textarea#body {
    background: #FFFFFF url(http://i155.photobucket.com/albums/s316/oniez/kodok-1.gif) no-repeat scroll center center;
    }

    hanya menempatkan gambar saja.
    sedangkan seting font, warna dll, mengikuti seting anda yang terdahulu.
    Cari di CSS anda, sisipkan yang saya cetak tebal.

    ReplyDelete
  20. hore...bs om..
    makasih yah..banyak ilmu deh join kesini..
    thanks all..

    ReplyDelete
  21. klo mo taro di pinggir kanan or kiri gmn yah?

    ReplyDelete
  22. mantap mas tapi ubah ukuran test area-nya bisa g yach ?

    ReplyDelete
  23. klik link di bawah HS : Customize My Site, lanjutkan dengan Custom CSS
    atau langsung klik ini : http://multiply.com/setup/pages/upload-css
    Masukkan kode pada akhir CSS anda.

    ReplyDelete
  24. Wah makasih ya tips nya, saya hunting gambar dulu deh... trus di coba

    ReplyDelete
  25. Silahkan.
    Semoga cepat ketemu dengan apa yang dicari.

    ReplyDelete
  26. Kalo sy maunya bukan gambar, tapi tulisan yg agak besar spt: dilarang chat di sini. Gimana ya om DK..?

    ReplyDelete
  27. buat tulisan di pengolah gambar, simpan sebagai file JPG, GIF atau PNG dan jadikan image tsb sebagai background.

    ReplyDelete
  28. Thx ya buat infonya.. sangaaaaaattttt membantu sekali hehehe..

    ReplyDelete
  29. Saya lihat, belum ada sub code CSS tersebut.
    coba pasang di Custom CSS anda.

    ReplyDelete
  30. baru coba mantafffffffffffffffff....trima kasih suhu....

    ReplyDelete
  31. koq ga bisa ya??
    *penghuni baru.com

    ReplyDelete
  32. pa admin, saya udah buat link ini diakhir css, tapi koq gbs ya
    /* Basic selector to add background into textarea */
    textarea#body {
    background: #FFFFFF url(http://je-suisunique.deviantart.com/art/ilalang-ilalang-ku-62620325) repeat scroll left top;
    color: #000000;
    }

    ReplyDelete
  33. pak admin bantuin bikin donk,
    supaya dicomment boxnya ada effect daun2 gugur gitu, hehe
    tolong yaa

    ReplyDelete
  34. hee.. bisa
    mksh..
    *nih
    ngasih es krim buat pak admin

    ReplyDelete
  35. mas, setelah saya coba, hasilnya hanya untuk comment box yang akan kita tulis. kalau ingin memberi b'ground pada comment box yang ada dibawah comment box utama (yang sudah ditulis oleh kontak) bagaimana..?? tks

    ReplyDelete
  36. om kalo mau ganti warna text font di setiap comment-box gimana ya? aku udah pusing kalo nulis ga bisa kliatan karena tulisannya putih, box-ku putih pulak. tolong ccs codenya om.. bantuiiinn :((
    pm ya om biar aku "ngeh" :D

    ReplyDelete
  37. di sini aja yaa ...
    pertama, buka custom CSS.
    kemudian tambahkan kode berikut ini di akhir CSS anda.

    .replybox textarea {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    }

    ReplyDelete
  38. boLeh tanyaa ??

    di buku tamu saya ga ada tanda 'BALAS' kaLo ada yang komen.. duLu sih ada .. sekarang dia hiLang entah kemana ..
    mohon dibantu yaa ..
    terima kasih ^^

    ReplyDelete
  39. 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;

    ReplyDelete
  40. Makasih infonya yyah, aku pakai kode yang ini
    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; :)

    ReplyDelete