Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menambahkan Scroll pada Kotak Komentar dengan Menggunakan CSS


Cara Membuat Scroll pada Kotak Komentar dengan Menggunakan CSS  - Hayoo..siapa yang mau membuat scroll pada kotak komentar blognya dengan menggunakan CSS silahkan mampir disini…(he he kayak orang mau jualan aja..!). Soalnya saya juga lagi bingung mau mulai dengan kalimat apa diawal tulisan, yang jelas topik kali ini memang mau membahas tuntas..tas..tentang cara membuat/menambahkan 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 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 :
#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 #eee dapat dirubah sesuai selera anda.
7.    Jika sudah selesai, SAVE template anda.

Well..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. Semoga tips blogging ini bermanfaat.


26 komentar untuk "Cara Menambahkan Scroll pada Kotak Komentar dengan Menggunakan CSS"

  1. makasih gan
    karena template kita sama jadi langsung berhasil
    sebelumnya udah coba pake cara yang lain tapi gagal semua
    sekarang udah bisa...visit back ya..???

    BalasHapus
  2. terima kasih mas informasinya, kemarin pas kerepotan mau buat scroll eh jadi rusak deh kode CSS saya. lagi pula kasian pas orang mau kebawahin jadi kepanjangan. Salam kenal ya mas..mampir dong mas...

    BalasHapus
  3. Makasih banyak infonya sob,tipsnya sukses ane terapkan di blogku.Happy weekend and happy blogging.

    BalasHapus
  4. makasih tutorialnya, sudah saya aplikasikan

    BalasHapus
  5. berkunjung ke bloger INDONESIA
    ditunggu realbacknya...!!

    BalasHapus
  6. mampir lagi sekalian praktek artikel di atas :D
    setiap ane nyari artikel blog pasti blog ini ada di halaman 1 google search :-D jempol 2 untuk agan...

    BalasHapus
  7. berguna banget nih supaya komentar gak menjulur terlalu kebawah. Nice Inpoh

    BalasHapus
  8. terima kasih yang setulus-tulusnya. tutorial sudah dipraktekkan dan hasilnya sangat memuaskan.:)

    BalasHapus
  9. wah .. kode nya belum ktemu .. jadi blm bisa ganti ...kira-kira daerah mana ya..?

    BalasHapus
  10. Kode #comments-block{ gak ketemu mas (muncul warna merah), ada cara lain gak????? kalo ada kasih tau yaaaa....
    Makasih

    BalasHapus
  11. Mantap gan . ijin saya coba yah . hehhee

    Visit back ya gan .

    BalasHapus
  12. terima kasih info yg sangat bermanfaat ini..


    #Semoga sehat selalu

    BalasHapus
  13. makasih infonya, Mas Bro. salam persahabatan.

    BalasHapus
  14. mantab mas bro trimakasih toritorialnya, dan salam kenal dikunjungan perdana ini..

    BalasHapus
  15. gimana kok gak ketemu #comments-block{. ada cuma coments-block gimana tuh.

    BalasHapus
  16. Mau ikutan nyoba "cara Menambahkan Scroll Pada Kotak Komentar" ne Sob, thanks informasinya

    BalasHapus
  17. makasih mas bro atas semuanya,,,,,,

    BalasHapus
  18. thank infonya gan..very2 bermanfaat..

    BalasHapus
  19. Tidak berhasil diblog saya klo pake kode ini bang,, kira-2 yg sala apanya yah bang... mohon bantuannya...

    BalasHapus
  20. punya saya ko ga ada kode koment blognya ya..?

    BalasHapus