Mempercantik Kotak Komentar

Cara mempercantik area kotak komentar ini saya dapatkan dari blog milik Jaloe (Catalog-Tutorial). Oke kita langsung olah TKP saja:
Kode untuk mengatur kotak komentar di template minima ada di tag :

<div class="comment-form">

kotak komentar

</div>



Oleh karena itu, untuk mempercantik kotak komentar tersebut saya tambahkan kode CSS.

Cari kode]]></b:skin>. Copy kode dibawah ini diatas kode]]></b:skin>

.comment-form {

background:#DCC4DE;

border:5px solid #8C748F;

}

Untuk mengatur warna background silahkan ganti background sesuai warna selera sobat blogger, atau atur border sesuai selera sobat blogger (silahkan diotak atik sendiri). Hasilnya seperti ini

Jika tampilan di sobat blogger seperti ini

Kalau kita perhatikan tanda panah, maka yang terlihat:

Pertama kotak text area yang menempel pada border dan kedua background warna yang jaraknya terlalu dekat dengan tulisan bawah. Keliatannya kurang sedap di pandang dan tidak enak di lihat. Maka solusinya saya menambahkan kode yang mengatur jarak antara text area dan background, yakni sebuah margin dan padding.

.comment-form {

background:#DCC4DE;

border:5px solid #8C748F;

margin:0 10px 20px 10px;

padding:0 0 0 15px;

}

karena kotak komentar bisa kita tambahkan sebuah background warna maka kita pun bisa menambahkan background berupa gambar seperti di bawah ini

Caranya seperti ini:

.comment-form {



background:transparent url

(http://lh4.ggpht.com/jaloee/SJ3vZ2an3LI/

AAAAAAAACYY/pIG3okitsFY/kataku_form02.jpg)

no-repeat left top;

border:0px solid #8C748F;

margin:10px 10px 20px 10px;

padding:65px 0 0 20px;

}

Sumber: Jaloe