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...

Posted by Hii Sekai