Pada tulisan sebelumnya saya mengungkapkan salah satu cara untuk mengatasi "kekosongan" pada blok komentar yang belum terisi jika blok komentarnya menggunakan scroll, yaitu dengan membuat "pengantar komentar". Cara lain untuk mengatasi "kekosongan" tersebut adalah dengan membuat toggle spoiler pada block komentar.
Bagi kamu yang menyetel pengaturan penempatan formulir komentar-nya disemat di bawah entri, kemudian artikel-artikelnya sering dikomentari banyak orang sehingga membuat panjang blok komentar, mungkin dengan membuat spoiler ini akan sangat membantu karena setiap komentar yang masuk akan disembunyikan sehingga kotak kolom komentar berada tepat di bawah artikel (bagi yang sudah menggunakannya related post akan berada di bawahnya). Dan untuk melihat komentar-komentar tersebut kamu bisa meng-klik spoiler-nya.
Sebagai contoh toggle spoiler ini kamu bisa melihat pada spoiler related post (artikel terkait) yang berada di bawah artikel ini.
Jika kamu ingin membuat spoiler pada blok komentar, kamu bisa mengikuti langkah-langkah sebagai berikut:
Nah, sekarang coba kamu lihat kotak komentar kamu, apakah sudah bisa di Show/Hide?
Ok coy, selamat mencoba.....
Bagi kamu yang menyetel pengaturan penempatan formulir komentar-nya disemat di bawah entri, kemudian artikel-artikelnya sering dikomentari banyak orang sehingga membuat panjang blok komentar, mungkin dengan membuat spoiler ini akan sangat membantu karena setiap komentar yang masuk akan disembunyikan sehingga kotak kolom komentar berada tepat di bawah artikel (bagi yang sudah menggunakannya related post akan berada di bawahnya). Dan untuk melihat komentar-komentar tersebut kamu bisa meng-klik spoiler-nya.
Sebagai contoh toggle spoiler ini kamu bisa melihat pada spoiler related post (artikel terkait) yang berada di bawah artikel ini.
Jika kamu ingin membuat spoiler pada blok komentar, kamu bisa mengikuti langkah-langkah 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 CSS untuk comments-block (gunakan Control F atau F3).
- Tambahkan perintah scroll berikut kedalamnya (gunakan Control C untuk mengkopi):
(Untuk lebih jelasnya kamu bisa mempelajari artikel ini)
height:300px; /* tinggi blok komentar */ border:1px solid #CCC; /* warna bingkai blok komentar */ overflow:auto; /* perintah scroll */
Kamu bisa mengubah tinggi dan warna bingkai sesuai keinginan kamu. - Jika kamu tidak ingin menggunakan scroll untuk blok komentar, abaikan perintah penambahan scroll di atas.
- Selanjutnya cari kode ]]></b:skin>:
- Letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/ .widgethidden {display:none} .widgetshown {display:inline} - Lalu letakkan script berikut di bawah kode ]]></b:skin>:
<script type='text/Javascript'> function togglespoiler (postid){ var whichpost = document.getElementById(postid); if (whichpost.className=="widgetshown"){ whichpost.className="widgethidden"; } else{ whichpost.className="widgetshown"; } } </script> - Setelah itu carilah kode berikut :
<dl id='comments-block'>
- Bagi yang sudah menggunakan avatar Blogger Profile, cari kode ini:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
- Jika sudah ketemu, ganti dengan kode ini:
<dl class='widgethidden' id='comments-block'>
- Atau dengan kode ini bagi yang menggunakan avatar Blogger Profile:
<dl expr:class='data:post.avatarIndentClass' class='widgethidden' id='comments-block'>
Catatan:Jika blok komentar kamu menggunakan scroll maka avatar Blogger Profile dengan sendirinya tidak akan terlihat karena tertutup oleh kotak scroll blok komentar. - Setelah itu, tambahkan kode ini di atasnya:
<div style='text-align:center; margin:10px 0px; font-size:15px; font-weight:bold;'> <a href='javascript:togglespoiler ("comments-block")' title='Click for expand'>Show/Hide Comments</a> </div>- Kamu dapat mengubah ukuran huruf, judul link (kalimat Click for expand), dan nama link (kalimat Show/Hide Comments) sesuai keinginan kamu.
- Simpanlah hasil kerjaan kamu dan ucapkan alhamdulillah.....
Nah, sekarang coba kamu lihat kotak komentar kamu, apakah sudah bisa di Show/Hide?
Ok coy, selamat mencoba.....
17 komentarPosting Komentar
tapi kenapa komentar harus disembunyiin....
blog saya tadina mah mau pake scroll kang ...tapi gagal terus jadi bingung.........cari kodenya susah tidak ada yang seperti di tutorialnya (apa beda atau cari yang mirip mirip )
mudah mudahan yang ini bisa di pake kang...doakeun nya...
@Rep Pyset:
Biar jelas sobat baca artikel Membuat Scroll Pada Blok Komentar.
@Rep Rahmatea:
Piraku teu ayaan lur, coba gera pilarian deui, atawa cari comments-block na wungkung. Tong hilap, expand widgetna dicentrang
saya lebih suka yang perti mas ini... scrolll hehehe
wah tipnya kang enes keren2 euy
wuih hade euy idena mah...tapi kalo yg udah ada javascript ajax dr google gak usah javascript itu lagi loh, bisa kita buat id terus di tag deh bagian komentnya dg id entuh..(sok tau w ah)...wkwkwkkwkw
@Rep Beben:
Tah...tah... Kumaha tah mang. Bejaan atuh carana mun make id ajax?
Jadi mainan punyanya kang eNes, sip kang!
sobat mau tanya donk, bikin tempat komentar kaya sobat yang bisa scroll gimana caranya...? ^^
Waduh HTML yang satu bisa Gan,tpi nu hiji teh nteu bisa kumaha atuhc...??
@Ezha_cute:
Cari aja artikel tentang membuat scroll pada blok komentar sob. Caranya ada di situ.
@Goeztcool:
Maksudnya yang mana sob?
Thanks bgt tutorialnya mas. :)
kok g bisa bekerja dgn baik mas..., bisanya cuman nge-hidden doang paka buka blog tetep tampil juga... cuman ngehidden aja... HELP!
mantaabb... mampir ke blog ku ya:
http://loviabatikdancraft.blogspot.com/
tq kang,ane coba n berhasil
nice post sob :) salam kenal ya
thanks gan tutornya
salam BLOGWALKING
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.