1 Apr 2012

Cara Membuat Spoiler Pada Komentar

Assalamu ‘alaikum sobat blogger semua, kali ini Muro’i El-Barezy akan berbagi sedikit tips, bagaimana membuat spoiler pada komentar blog, ini berfungsi untuk menyembunyikan komentar dan akan muncul ketika di klik. Oke langsung saja, caranya sangatlah mudah :
Buka dasbor blog sobat >>Klik template >> Klik edit HTML >>Klik Expand Template Widget dan temukan kode berikut (untuk memudahkan ,tekan Ctrl + f ) :

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div

Setelah sobat menemukan kode diatas, silakan copy script dibawah ini, persis diatas kode tadi :

<!-- spoiler komentar part1 -->
<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 Disini&apos;; }' style='margin: 0px; padding: 0px; width: 200px; font-size: 15px;font-weight:bold;' type='button' value='Lihat Komentar Disini'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->

Langkah terakhir adalah klik SAVE.
Gimana, mudahkan? Selamat mencoba dan semoga berhasil.

Catatan :
  • Sebelum oprek oprek, silakan sobat beck up dulu templatenya.
  • Jika gagal, silakan sobat taruh script dibawah ini setelah kode  yang berwarna biru. Berikut scriptnya :

<!-- spoiler komentar part2 -->
</div></div></div>
<!-- spoiler komentar part2 end -->