22 Feb 2013

CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI KOMENTAR BLOG BLOGGER


Panduan ini khusus membuat spoiler di blog Blogger Blogspot bukan di blog Wordpress atau Joomla. Tujuannya agar artikel yang banyak komentarnya tampak lebih rapi seperti di blog ini.

1. Login/masuk ke Blogger.com -> Template -> Edit HTML -> Lanjutkan -> kasih tanda tik/centang "Expand Template Widget"
2. Cari kode berikut (gunakan Ctrl + F untuk mempermudah pencarian):


  1. <div class='comments-content'>  
  2. <b:if cond='data:post.embedCommentForm'>  
  3. <b:include data='post' name='threaded_comment_js'/>  
  4. </b:if>  
  5. <div id='comment-holder'>  
  6. <data:post.commentHtml/>  
  7. </div>  
  8. </div>  

3. Masukkan kode berikut di atas kode no.2
  1. <!-- spoiler komentar part1 alkhoirot.net -->  
  2. <div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>  
  3. <div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>  
  4. <!-- spoiler komentar part1 end alkhoirot.net-->  

4. Masukkan kode beerikut di bawah kode no.2
  1. <!-- spoiler komentar part2 alkhoirot.net -->  
  2. </div></div></div>  
  3. <!-- spoiler komentar part2 end alkhoirot.net -->  

5. Klik Simpan. Selesai. readmore