Utak-Atik Kotak Komentar

Lama juga nggak ngeposting nih. Dikarenakan 2 hari yg lalu internet lagi mati padahal mau buat postingan ini. Plus saking banyaknya PR (uh..apalagi PR matematikanya itu tuh). Untuk topik postingan kita kali ini, kita akan bereksperimen dengan embedded comment form, sebuah bagian blog blogspot yang sering luput dari perhatian kita....

Embedded Comment Form ini sebenarnya mudah untuk di-kustomisasikan.Maksudnya, diubah sesuai kemauan anda. Jadi, sayang tho kalau bagian ini kita abaikan begitu saja. Untuk contohnya, anda bisa melihat kotak komentar punya saya itu. Dan bandingkan dengan blog blogspot yang kotak komentarnya masih belum tersentuh.


Langsung saja deh. Untuk pertama-tama, ayo kita menggambar memberi tambahan background, mengatur jarak dengan margin dan padding, dan membuat pembatas.

Untuk menambah background, kita harus mencari tag HTML-nya, yaitu seperti ini
<div class="comment-form">
kode membuat kotak komentar
</div>


Karena terdapat HTML-Class "comment-form", maka untuk mengkustomisasikan kotak komentar, kita harus membuat CSS-Selector dengan kode sebagai berikut
.comment-form {

}


Untuk memberi background pada kotak komentar kodenya seperti ini
.comment-form {
background:kode warna;
}


Setelah itu, kita rapihkan kotak komentarnya dengan pembatas. Kodenya sebagai berikut
.comment-form {
border:5px solid kode warna;
}


Kalau anda rasa kotak komentarnya terlalu menyamping, gunakan kode ini
.comment-form {
margin:0 10px 20px 10px;
padding:0 0 0 15px;
}


Dan hasil keseluruhan gabungan kode-kode CSS tersebut menjadi seperti ini
.comment-form {
background:kode warna;
border:5px solid kode warna;
margin:0 10px 20px 10px;
padding:0 0 0 15px;
}


Coba bandingkan kotak komentar di bawah ini

Klik untuk memperbesar


Dan kotak komentar ini

Klik untuk memperbesar

Selamat Mencoba & Be Creative ;) *b'gaya bahasa inggris :D*

Sumber : http://catalog-tutorial.blogspot.com


Category Article