Divan blog

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:

• 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):

  
  height:300px; /* tinggi blok komentar */
  border:1px solid #CCC; /* warna bingkai blok komentar */
  overflow:auto; /* perintah scroll */
  

  (Untuk lebih jelasnya kamu bisa mempelajari artikel ini)
  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.....