Cara Membuat Fungsi Scrool Pada Komentar Pada Blog

Pada Postingan kali ini saya akan membahas tentang Cara Membuat Fungsi Scrool Pada Komentar Pada Blog berguna untuk memperpendek kotak komentar, sangat diperlukan, dalam rangka menghemat ruang template anda agar tidak terlalu panjang kebawah, dimana banyak kasus yang terjadi halaman web kita akan menjadi sangat panjang jika komentar pada suatu postingan kita sudah sangat banyak. Hal ini tentu saja mengganggu jika kita atau pembaca blog ingin mengetahui widget ata hal - hal penting dalam blog kita yang terletak di footer blog kita, karena kita/pembaca harus melakukan scroll halaman blog begitu panjang ke bawah. Jika anda ingin menghemat/ memperpendek halaman blog anda karena adanya list komentar dari rekan blogger yang sudah terlalu banyak, inilah solusinya yaitu dengan cara membuat scroll kotak komentar menggunakan CSS.

Hasil akhirnya adalah kotak komentar anda akan tampil sesuai keinginan anda dalam menentukan ketinggian kotak kolom komentar sesuai dengan kebutuhan. Kotak komentar dengan scroll ini juga bermanfaat jika ada yang ingin submit komentar ke dalam postingan anda tidak terlalu repot untuk melakukan scroll terlalu panjang kebawah karena tombol "post a comment" tepat berada di bawah kotak/kolom komentar yang anda buat nanti.Tidak usah berpanjang lebar lagi, dibawah ini adalah langkah-langkah bagaimana  

 

cara menambahkan/membuat scroll pada kotak komentar :

1. Login ke dashboard blogger anda.
2. Pilih Design/rancangan, kemudian pilih Edit HTML, lanjutkan dengan memberi tanda centang pada 'Expand widget template'.
3. Kemudian silahkan carilah kode CSS #comments-block{
4. Tambahkan kode CSS dibawah ini stelah kode CSS di atas.

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

5. Berikut ilustrasi kode CSS pada kotak komentar blog ini SEBELUM 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 menjadi seperti ini :

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

6. Sedangkan ukuran tinggi kotak komentar 300px, jenis border 1px solid serta warna border #eee tentunya dapat dirubah sesuai selera anda.

7. Jika sudah selesai, lakukan saving template anda.

8. Buka blog anda, kemudian klik salah satu artikel postingan anda, silahkan cek kolom komentar anda...dan kotak komentar anda sudah rapi jali terkurung dalam kotak komentar sesuai ketinggian yang anda inginkan. Halaman posting menjadi rapi, simple dan enak dipandang, karena tidak terlalu panjang. 

 

Bagaimana kawan sangat mudah kan..?? Selamat Mencoba :)