Cara Mebuat Scrool Pada Kotak Komentar Dengan CSS

Cara Mebuat Scrool Pada Kotak Komentar

Sobat pasti sudah tahu kan apa itu Scrool  pada Kotak Komentar? Untuk lebih jelas,  silahkan lihat  DISINI    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, karenaCSS 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 Tokonjo, 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 :


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 "

Catatan!

Scroll ini berfungsi jika komentar kita sudah sampai 10 komentar lebih. Jadi, bagi yang komentar nya belum terlalu banyak, jangan berkecil hati. Karena tidak akan ada efek apa-apa jika komentar yang kita punya kurang dari 10.

Nah, cukup simple kan? Sekian dulu postingan dari AcerNoval. Semoga bermanfaat yaa :D.  Mohon maaf bila ada kata-kata yang salah, karena kita seorang blogger yang sama-sama sedang belajar, saling bertukar ilmu, dan saling menjaga silaturahmi antar blogger. Jika ada pertanyaan jangan dipendem dihati kalian, silahkan isi Form komentar ya !  Salam sukses selalu, Salam Blogger ...


Refferal