Membuat Komentar Model Shown/Hide

Observasi satu lagii telah jadiiiii...!!!! Sekarang tentang modifikasi komentar. Gak apa-apa khand??? Hehe... Siapa tau ini berguna. Nah, menuju deh ke hasil observasiku. Aku sengaja meneliti tentang komentar dan gak sia-sia, setelah ngelembur sampai jam 1 tadi malam, aku berhasil buat yang namanya Komentar Shown/Hide. Halah, maaf yaa kalo aku namain gitu, masalahnya waktu aku Googling aku nggak nemuin cara kayak gitu, apa aku yang gak tau keywordnya yaaa??? ;)

Sebagai bahan untuk contoh, aku pake blog satunya untuk bahan observasi. Sayang kalo yang ini ntar rusak kalo gagal... Klik sini untuk Contoh.

Terus apa manfaatnya komentar mode kayak gini?? Aku pikir manfaatnya adalah mempersingkat bagian komentar dengan menyembunyikannya, tapi kalo diklik ya ntar semua komentar akan muncul otomatis, jadi kalian bisa
nulis gini:

Eittt...Jangan sentuh dulu....
Kamu boleh sentuh kalo udah isi kotak komentar..OK??? :D

Hehe :D ... Tapi itu cuma contoh aja, terserah kalian mau kasih kata apa... Oke, sekarang ayo kita lihat bagaimana caranya sih buatnya???? Gini lhoo....

1. Meluncur aja ke Dasbor ---> Layout/Tata Letak ---> Edit HTML


2. Jangan lupa klik kotak sebelah Expand Template Widget dan sebaiknya men-download dulu template kamu sebelum melakukan pengeditan untuk menghindari kesalahan yang tidak diinginkan


3. Paste kode di bawah ini sebelum kode </head>
   
   

   <script type="text/Javascript">
   
   function togglecomments (postid) {
   
   var whichpost = document.getElementById(postid);
   
   if (whichpost.className=="commentshown") {
   whichpost.className="commenthidden";
   }
   else {
   whichpost.className="commentshown";
   }
   }
   </script>



4. Cari kode <dl id yang mengacu pada comments tapi menurutku kebanyakan kodenya begini:
   
   

   <dl id='comments-block'>

   
   
   atau
   
   

   <dl id="comments-block">



5. Kalo udah ketemu ganti kode tadi dengan kode di bawah ini:
   

   <dl class='commenthidden' id='comments-block'>



6. Gak berhenti sampai di situ, kalian harus menyisipkan kode di bawah ini di bawah menu .deleted-comment {
   

   .commenthidden {
   display:none
   }
   .commentshown {
   display:inline
   }

   
   
   Kalo gak ngerti selengkapnya begini:
   
   

   .comment-footer a:link {
   color: #999999;
   }
   .deleted-comment {
   font-style:italic;
   color:gray;
   }
   .commenthidden {
   display:none
   }
   .commentshown {
   display:inline
   }
   .feed-links {
   clear: both;
   line-height: 2.5em;
   }
   #blog-pager-newer-link {
   float: right;
   }
   #blog-pager-older-link {
   float: left;



7. Kemudian cari kode berikut ini
   
   

   <a name='comments'/>

   
   
   Selengkapnya perhatikan kode di bawah ini:
   

   <a name='comments'/>
   <b:if cond='data:post.allowComments'>
   <h4>
   <b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>:
   <b:else/>
   <data:post.numComments/> <data:commentLabelPlural/>:
   </b:if>
   </h4>



8. Sisipkan kode berikut di bawah kode </h4> tadi:
   

   <base target='_self'><h2><a aiotitle='click to expand' href='javascript:togglecomments%20("comments-block")' rel='nofollow'><b> »» Lihat / Tutup Komentar</b></a></h2></base>

   
   Untuk kalimat yang berwarna merah bisa diganti dengan kata-katamu


9. Simpan deh...

Oke... Itu dia caranya, udah bisa belum niih?? Kalau masih bingung dan ada yang ingin ditanyakan, kirim pesan aja di kotak komentar yaaa??

Semoga berhasil dan semoga bermanfaat kawand!!! :D