Scrolling Element Komentar

Sebelumnya pastikan kamu sudah membaca postingan tentang cara memasang kolom komentar di bawah posting. Belum yah? Buruan gih baca postingannya. Nah, jika postingan blog kamu banyak yang memberikan komentar berarti ... postingannya bagus dan uptodate! Nyeletuk aja. Maksud OB halamannya akan semakin panjang ke bawah. Terus bagaimana cara melakukan optimasi blog agar halaman komentar tidak menjadi panjang, walaupun dikomentari oleh puluhan pengunjung blog? Apabila kamu berpikir untuk mengembalikan setting komentar ke defaultnya, itu sih bukan konsep jitu untuk memecahkan suatu masalah.

Trik blogger ini juga pernah ditanyakan oleh sobat ammadis yang mempunyai alamat blog di http://www.ammadis.web.id, untuk versi demonya silakan klik link demo ini. Lho... aku kemarin juga pernah nanya ke optimasi blog tapi belum nongol reviewnya, bahkan mungkin lebih dulu dari ammadis. Wah, kalau sudah gini ramai jadinya ha.. ha..

Pertanyaan yang belum OB review dimungkinkan beberapa hal :
Pertama, OB belum bisa atau belum tahu; Kedua, struktur peng-kode-annya rumit, sehingga perlu waktu yang tidak sebentar; Ketiga, kodenya sudah dapat/kelar tapi error dalam aplikasinya; Keempat, OB kurang tanggap dengan pertanyaan yang masuk, sehingga terlewati (kelamaan tidak online); dan Kelima, OB benar-benar tidak tahu.

Kembali ke trik scrolling elemen komentar,... Yuk! Kita belajar sama-sama cara bikinnya.

  • Login ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari kode kumpulan kode CSS comments.
/* Comments
-------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Tambahkan kode berikut di atas kode #comments h4.
#comments {
height:280px;
overflow:auto;
}

Catatan :
  1. Ganti nilai kode yang berwarna merah sesuai dengan tinggi elemen scroll yang kamu inginkan.
  2. Kode overflow:auto; berarti jika elemen komentar melebihi tinggi yang telah ditentukan (280px), maka fungsi scroll otomatis akan bekerja.
  • Jangan lupa disimpan

Selamat menampilkan elemen komentar dalam model scroll...

28 komentar untuk “Scrolling Element Komentar”

  1. ok,. mas OB,. makin mantap ja infonya,. gd lck mas,.

    BalasHapus
  2. wah posting baru lagi kapan-kapan diterapin deh klo udah banyak yang koment heheheh >.<

    BalasHapus
  3. Semakin keren aja manuver trik blogger dari mas OB ini :)
    Eh, mas OB dapet award persahabatan dari saya. bila berkenan, diambil ya mas :)

    BalasHapus
  4. Siip makasih infoya, bisa diaplikasikan di blog saya yang di blogspot nih....

    BalasHapus
  5. Woke, mantap nih... bisa dicoba... :D

    BalasHapus
  6. iy nih,klo untuk psang trik ini klo udh pd bnyk yg comment aj.. :p

    BalasHapus
  7. mas OB,gimana sih cra bkin tanggal di bwah postingan kya punya o-om.com??
    jd tanggalnya ga usah pke icon gitu..

    BalasHapus
  8. mantap, tp komentarku mash dikit. mngkn nanti br berguna. aku bookmark aja dulu punyamu.

    Btw, klo mau script templateku boleh aja asl OB jg bantuin aku mengenai script aku ini.

    Yg pertama : dlm template aku gmn caranya bikin Breadcrumbs. Aku sudah coba smua cara2 para blogger trmasuk km. tp blum berhasil.
    Yg kedua : Kamu tahu ngga cara bikin page navigation yg kayak blog ini. Aku dah dapat scriptx tp ngga brhasil d templateku.

    BalasHapus
  9. kalo di pake buat WP bisa gak mas???
    salam kenal :)

    BalasHapus
  10. to wahyoe: kayanya OB belum bisa menjawab kalau tidak dicoba lebih dulu kodenya di wp. Klo mas wahyu ingin mencobanya, why not? Cuma yg OB tau, template blogger ama wp kan beda, walaupun di CSS-nya sama

    BalasHapus
  11. Makasih infonya sobat.. ini sangat bermanfaat.. btw sekalian ...Saung Web menyampaikan selamat menyambut hari raya idul fitri, maaf lahir dan batin

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. terimakasih broo..... :-o :)

    BalasHapus
  14. yap ... postingan yang bagus... :)

    BalasHapus
  15. mas ini cara bikin komentar lgsung kyk gini yah

    BalasHapus
  16. scrolling element komentar juga bisa bikin blog lebih simple karena panjang halaman jadi lebih pendek. tapi menurut aku untuk kenyamanan lebih baik tidak usah ada frame untuk element

    BalasHapus
  17. saya ingin mencoba ini di blog wordpress saya. bisa gak ya

    BalasHapus
  18. hmm...
    saya mau pakai ini tp yg comment di blog saya aja msh jarang-jarang jd ntar-ntar aja deh..
    ijin copy dl mas..
    kl berminat tuker link mas..??
    niche sama..

    BalasHapus
  19. Wah makasih banyak yah.... saya bikin sekarang mas,,,, saya baru bikin blog mas.... trus saya juga baru ketemu tutorial blog mas Ob.... Pokoknya makasih banyak mas

    BalasHapus
  20. Datang berkunjung, semoga dapat sambutan hangat...

    BalasHapus
  21. blog ini ide dan triknya luar biasa

    saya baru belajar
    http://onlinebusinessclick.blogspot.com

    BalasHapus
  22. terimakasih gan. ane ninggalin jejak dulu

    BalasHapus