Cara Memasang Scroll Pada Komentar Menggunakan CSS

Cara Membuat Scroll di Kotak Komentar Menggunakan CSS. ini adalah lanjutan postingan saya yang terdahulu yaitu juga Tutorial Memasang Scroll pad Komentar Blog . tetapi bedanya jika dulu harus edit HTML maka yang serang kita hanya edit CSS nya saja, jadi lebih simpel, dan juga cara ini hanya Memasang Scroll Pada Komentarnya saja, bukan Form Komentarnya.

Sobat pasti sudah tahu kan apa itu Scrool  pada Kotak Komentar? Sudah banyak blog yang membahas tentang hal ini, namun saya akan memberikan hal yang berbeda. Kita akan mencobanya menggunakan CSS. Menurut saya, CSS lebih baik daripada Script, karena CSS sangat cepat direspon oleh Browser & sangat ringan untuk Loading Page Blog. Jadi kita dapat menghemat kecepatan blog kita, dan ini hal yang bagus untuk SEO di mata Google.

Selain itu,  menurut pemikiran Saya, Jika sebuah postingan memiliki komentar yang sangat banyak, bisa dibayangkan betapa panjangnya postingan + komentarnya ke bawah, bahkan kita mungkin bingung untuk menemukan footer blog tersebut saking panjangnya. Sebagai pemilik blog mungkin itu menjadi perhatian karena akan mengurangi keindahan blog. Menarik bukan? Okay langsung saja kita lihat tutorialnya :

Cara Memasang Scrolldi Komentar Blog

1. Login ke akun Blogger sobat
2. Pilih Rancangan => Edit HTML => centang Expand Template Widget
3. Tekan CTRL+f  => Cari kode  #comments-block { atau  #comments-block{
4. Tambahkan kode berikut, tepat di bawahnya:

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

    Maka kodenya akan terlihat seperti ini : 

#comments-block {
max-height:300px;
border:1px solid #eee;
overflow:auto;
etc…
}

5. Sebelum kita simpan, silahkan sesuaikan tinggi kotak scroll dengan mengubah   kode warna merah, sedangkan kode warna biru, untuk warna garis pinggir  (border). Ubahlah sesuai selera sobat.


6. Klik Simpan Template , dan lihat hasilnya .

Ketterangan :
Bagaimana CSS tersebut bekerja? Coba sobat perhatikan potongan CSS dibawah ini  :

1. height:300px;
Coba perhatikan pada CSS diatas! Tinggi From komentar yang awalnya tidak terbatas, kita ubah menjadi 300px; . Wah, nanti kalau panjang komentarnya sudah lebih dari 300 pixel , hilang dong tampilan komentar nya? Eitts tunggu dulu. Mari kita perhatikan kode selanjutnya.

2. border:1px solid #eee;
Sudah jelas, ini hanya sebuah pelengkap. Kode diatas adalah kode untuk memunculkan Garis (border) pada Scroll di kotak komentar , agar terlihat sedikit rapi. 

3. overflow:auto;
Seperti kita tahu, "overflow" adalah kode deafult Scroll. Kode ini adalah sambungan dari kode nomor 1. Tujuan kode ini yaitu untuk menampilkan komentar yang semula hanya 300px;  , menjadi tidak terbatas kembali. Namun, menggunakan Scroll.  Dengan kata lain, ukuran kotak komentar kita tetap tidak terbatas, hanya saja diperkecil oleh Scroll.

Nah, cukup simple kan? Sekian dulu postingan Cara Memasang Scroll Pada Komentar Menggunakan CSS. Semoga bermanfaat yaa . Jika ada pertanyaan jangan dipendem dihati kalian, silahkan isi Form komentar ya !  Salam sukses selalu, Salam Blogger ...