Cara Memasang Scroll Pada Komentar Menggunakan CSS
Space Iklan Disini, silahkan Hubungi kami !
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 :
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:
Maka kodenya akan terlihat seperti ini :
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 .
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 ...
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 sobat2. 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.
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.
10 comments:
Bener sob, jadi jelek kalau memanjang kebawah apalagi yang komentarnya lebih dari 50..... Ngrepotin kayak saya gini, yang kadang ngeblog di hape.... Ntar tak coba. Makasih entri nya
iya silahkan di coba sob,, kemarin juga psoting kek ginian juga.
kereen kereen.. nanti saya kayaknya harus masang juga biar lebar kolom komnetar gak kedodoran sampe bawah. hehe.. emang sih tempat saya komentarnya masih bisalah.. belum terlalu banyak... dan thankyu broo tutorialnya :D
oke sob sama-sama..disini banyak tutorialnya kok buat edit komentar lebih bagus..
wah...
harus dipraktekin nih..
soalnya form komentar blog saya masih disemat dibawah entri
^^
iya silahkan di ikutis saja sob langkahnya
Mas Gopar, bisa kasih caranya agar komentar di blog saya bisa lgsg aku komen balik (balas/reply) di bawah masing2 komentar?
ada mas,, baca aja disini
ntar kalo udah jadi pengen memodifiksinya tinggal komentar lagi aja
SiPPP, makasih banyak ya, Mas. Nanti kalau butuh bantuan, mas Gopar siap bantu kan? lam sukses buat Mas Gopar
iya , tenang aja , selama saya bisa pasti saya akan membantunya.jangan sungkan untuk bertanya
Post a Comment