Tentu kamu masih ingat artikel "Cara Membuat Scroll Pada Blok Komentar" yang pernah dimuat pada blog ini beberapa bulan lalu. Pada cara tersebut, scroll dibuat dengan menambahkan atribut pada CSS comments-block. Cara ini memang cukup mudah, sayangnya bagi kamu yang menampilkan avatar blogger profile pada kotak komentarnya, avatar-nya menjadi hilang (tidak ditampilkan). Membuat scroll dengan cara tersebut hanya efektif jika kita menggunakan avatar MyBloglog, seperti pada kotak komentar blog ini.
Cara lain untuk membuat scroll pada blok komentar ini adalah melalui penambahan kode pada HTML blog. Dengan cara ini avatar blogger profile pada kotak komentar akan tetap muncul (kelihatan). Hanya saja dalam menambahkannya perlu kehati-hatian dan ketelitian, salah-salah template blog kamu tidak dapat di-parse. Tapi jangan takut, jika kamu cukup sabar dalam mencari kodenya, cara inipun akan mudah kamu praktekkan.
Langkah-langkah yang harus kamu lakukan untuk membuat scroll dengan cara kedua ini adalah sebagai berikut:
Cara lain untuk membuat scroll pada blok komentar ini adalah melalui penambahan kode pada HTML blog. Dengan cara ini avatar blogger profile pada kotak komentar akan tetap muncul (kelihatan). Hanya saja dalam menambahkannya perlu kehati-hatian dan ketelitian, salah-salah template blog kamu tidak dapat di-parse. Tapi jangan takut, jika kamu cukup sabar dalam mencari kodenya, cara inipun akan mudah kamu praktekkan.
Langkah-langkah yang harus kamu lakukan untuk membuat scroll dengan cara kedua ini adalah sebagai berikut:
- Login ke akun Blogger kamu.
- Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
- Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
- Beri tanda centrang pada Expand Template Widget.
- Carilah kode berikut (gunakan Control F atau F3):
<dl id='comments-block'>- Bagi yang menggunakan avatar blogger profile, cari kode ini:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> - Kalau sudah ketemu, tambahkan perintah ini di atasnya:
<div style='overflow:auto; border:1px solid #ccc; height:250px'>
- Sesuaikan ukuran tinggi (height)-nya menurut kebutuhan.
- Kemudian carilah kode penutup dl, seperti ini:
</b:loop> </dl> - Setelah ketemu, tambahkan kode penutup ini di bawahnya:
</div>
- Simpan hasil editing ini dan ucapkan Alhamdulillah.....
Catatan Tambahan:
- Jika kamu sudah membuat scroll dengan cara pertama, hapuslah perintah scroll (meliputi: overflow, height dan border) pada CSS comments-block-nya supaya tidak muncul dua scroll pada blok komentar.
- Dengan menambahkan scroll ini, jika kotak komentar kamu masih belum terisi, maka akan terlihat sebuah bingkai (kotak) kosong setinggi ukuran yang kamu buat. Untuk mengatasinya, kamu bisa membuatkan kalimat pengantar atau toggle spoiler.
20 komentarPosting Komentar
tulisan arabnya keren...baguuusss pisan (bener g bahasa sundanya ??)
wew ... ruang tanya jawabnya bisa juga ya nyelip di menu tabview?
gimana ya pak kami disini udah banyak belajar dari bapak, cuma materi membuat scroll ini loh yg kami masih sulit pahami, dari materi session 1 trus eh sekarang yg session 2 ini juga kami lagi bahas bareng2 disini..doain y pak yg session 2 bisa...hehe... SEMANGAT buat Pak Guru
aku datang mengunjungi mu dengan formasi dan PR baru....
semoga maaf terucap
sebab lama aku tak bersilaturrahim ke sini...
salam...
nice info...thnks ya...
patut di coba neh
tos di cobi...tapi keukeuh teu aya scrollna........duh nasib.....nasib...
@Rep KBS Palembang:
Bisa oge geuning bahasa sunda, hehehe...
@Rep Wilyo:
Iya nih kemana aja atuh sob?
@Rep Ika dan Ikhsan:
Siiip....
@Rep Rahmatea:
Jigana aya nu salah kang, soalna ku abdi tos di tes, te aya masalah tuh...
makasih banyak Kang ,... kembali saya coba di template baru saya.
@Rep Bang Iwan:
Sama-sama bang....
Oalah.., ternyata perintahnya rumit gitu to..? Kirain gampang.... hehehe
Alhamdulillah..., aku udah bisa pasang scroll pada kotak komentar. Makasih ya...
Balik lagi Kang.., tanya lagi ya.
Kotak komentar kedua blogku sudah aku pasang scroll. Berhasil sih.... tapi Blog Catatan Kecilku sudah sesuai dg mauku, hanya saja utk Blog The Others kok modelnya 'lain' ya..?
Gimana tuh agar tampilan komentar di The Others biar sama dg Catatan Kecilku ?
@Reni:
Saya udah lihat kotak komentarnya mbak. Untuk kotak seperti itu, hapus saja perintah height dan overflow pada kode CSS untuk comments, spt ini:
#comments {
height:250px;
overflow:auto;
}
jadikan spt ini
#comments { }
wAH Bagus banget kk ide nya
kok di blog saya kodenya gak ada. kenapa ya kaNG?
@Ramdhan:
Di template WP-Polaroid, kodenya ini sob: <dl class='comments-block' id='comments-block'>
kamsia....kamsia..!buat ilmunya!
oh y mau tanya gmana caranya buat tampilan tab menu view kayak milik akang?
mohon di jawab yah! soalnya q pemula nih!
kalo mau buat kotak profil yang beda gimana mas???
download software gratis
Punyaku pakai, karena sering edit dan tambah script jadi tidak berfungsi scroll komentarnya!
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.