Blog's jojo

Halo sahabat blog's jojo. Pada artikel kali ini, saya akan membahas tentang  Cara Membuat Scroll di Kotak Komentar Menggunakan CSS. kepada Sobat-sobat sekalian... langsung ajah saya kasih scren shootnya di bawah ini

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 mbah Google.


Okay langsung saja kita lihat tutorialnya :


1. Login ke akun Blogger sobat ( Jangan pake akun orang lain, nanti bisa jadi berabe  loh, hehe :D )


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 .




Rahasia !
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.

"Mohon maaf jika penjelasan tersebut kurang benar, karena itu merupakan analisa dari saya sendiri, hehe :D "