Senin, 27 Desember 2010

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS

menghias kotak komentar blog
Cara ini saya dapat setelah sedikit belajar otak-atik CSS dengan teman karena pengen banget membuat kotak comment (yang sebelumnya terkesan "biasa" di dalam template Blogger ini) terlihat lebih "berwarna" dan "senada" dengan warna template blog ini.
Akhirnya kita menggunakan konsep frame untuk menghias sekeliling kotak comment tersebut. Caranya pun sangat sederhana dan mudah. Berikut langkah-langkah dan kodenya:

1. Masuk ke dashboard Blogger  => Design => Edit HTML/Edit Template

2. Jangan lupa backup dulu template yang lama untuk berjaga-jaga apabila ada kesalahan dalam editing.

3. Centang expand widget template di sebelah kanan.

4. Cari kode => ]]></b:skin> (Gunakan Ctrl+F untuk mencari)

5.Copy kode CSS dibawah ini dan letakkan tepat sebelum/diatas tag tersebut.
#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}
6. Setelah itu save dan coba dilihat hasilnya.

Ganti width dan height sesuai dengan ukuran yang anda inginkan. Begitu pula dengan warna, ganti kode background sesuai dengan keinginan. Untuk kode-kode warna, silakan lihat Hex Color Code Chart Generator.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Modern Warfare 3