Sunday 23 September 2012

Cara Membuat Scroll pada Kotak Komentar dengan Menggunakan CSS

Jika jumlah komentar pada sebuah artikel di blog sobat sudah banyak mungkin 20-50 komentar, tentunya pengunjung lain yang ingin berkomentar sedikit kerepotan karena harus scroll sampai bawah untuk menemukan kotak komentarnya. Nah solusi jitu untuk hal yang seperti ini, sobat bisa membuatkan scroll langsung pada kotak komentar agar lebih memudahkan pengunjung sekaligus membuat tampilan blog jadi lebih simple.

Berikut ini langkah-langkah cara menambahkan/membuat scroll pada kotak komentar :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode CSS kotak komentar dengan bantuan Ctrl+F, biasanya ditandai dengan kode #comments-block{.

4. Tambahkan kode CSS dibawah ini setelah kode tadi.

max-height:300px;border:1px solid #eee;overflow:auto;


5. Biar lebih jelas lagi saya berikan ilustrasi kode CSS pada kotak komentar blog iniSEBELUM dan SESUDAH dilakukan perubahan.

Kode CSS kotak komentar SEBELUM dirubah :

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}


Kode CSS kotak komentar SESUDAH dirubah :

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}


6. Ukuran tinggi kotak komentar 300px, jenis border 1px solid serta warna border #eeedapat dirubah sesuai selera anda.
7. Jika sudah selesai, SAVE template anda.

Sekarang tampilan kotak komentar jadi lebih rapi bukan ? Kalo gitu segera saja sobat membuat scroll pada kotak komentar blog anda dengan sedikit menambahkan kode CSS saja, sehingga tampilan blognya juga jadi lebih simple dan rapi serta nyaman dipandang.

Thank's....Semoga bermanfaat...

No comments:

Post a Comment