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.
makasih gan
BalasHapuskarena template kita sama jadi langsung berhasil
sebelumnya udah coba pake cara yang lain tapi gagal semua
sekarang udah bisa...visit back ya..???
Terima kasih, info yang menarik dan bermanfaat.
BalasHapusterima 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...
BalasHapustips yang menarik sahabat..:)
BalasHapusoke mas ... siap dicoba
BalasHapusMakasih banyak infonya sob,tipsnya sukses ane terapkan di blogku.Happy weekend and happy blogging.
BalasHapusmakasih tutorialnya, sudah saya aplikasikan
BalasHapusberkunjung ke bloger INDONESIA
BalasHapusditunggu realbacknya...!!
mampir lagi sekalian praktek artikel di atas :D
BalasHapussetiap ane nyari artikel blog pasti blog ini ada di halaman 1 google search :-D jempol 2 untuk agan...
berguna banget nih supaya komentar gak menjulur terlalu kebawah. Nice Inpoh
BalasHapusterima kasih yang setulus-tulusnya. tutorial sudah dipraktekkan dan hasilnya sangat memuaskan.:)
BalasHapuswah .. kode nya belum ktemu .. jadi blm bisa ganti ...kira-kira daerah mana ya..?
BalasHapusKode #comments-block{ gak ketemu mas (muncul warna merah), ada cara lain gak????? kalo ada kasih tau yaaaa....
BalasHapusMakasih
nice info
BalasHapusMantap gan . ijin saya coba yah . hehhee
BalasHapusVisit back ya gan .
terima kasih info yg sangat bermanfaat ini..
BalasHapus#Semoga sehat selalu
makasih infonya, Mas Bro. salam persahabatan.
BalasHapusmantab mas bro trimakasih toritorialnya, dan salam kenal dikunjungan perdana ini..
BalasHapusgimana kok gak ketemu #comments-block{. ada cuma coments-block gimana tuh.
BalasHapusMau ikutan nyoba "cara Menambahkan Scroll Pada Kotak Komentar" ne Sob, thanks informasinya
BalasHapusmakasih mas bro atas semuanya,,,,,,
BalasHapusizin praktek tips nya :D
BalasHapusmkasih gan..
BalasHapusthank infonya gan..very2 bermanfaat..
BalasHapusTidak berhasil diblog saya klo pake kode ini bang,, kira-2 yg sala apanya yah bang... mohon bantuannya...
BalasHapuspunya saya ko ga ada kode koment blognya ya..?
BalasHapus