Cara Menciptakan Spoiler Pada Kotak Komentar Blogger/Blogspot

Posted on
Tutorial blog kali ini membahas seputar cara membuat/memasang tombol spoiler pada kotak komentar blogger. Kalau kotak komentar blog terlihat memanjang ke bawah alasannya yakni terlalu banyak para komentator yang berkomentar di blog anda, maka tombol spoiler perlu dipasang biar memudahkan pengunjung blog yang juga akan mengisi komentar di blog anda.

Baca juga : Cara Membuat Spoiler Di Dalam Postingan Blog

Cara Membuat Spoiler pada Kotak Komentar Blogspot :
1. Login ke blogger.com
2. Pilih Template => Edit Html
3. Tekan Ctrl+F kemudian cari aba-aba ibarat berikut ini

<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>

4. Kalau sudah ditemukan maka letakkan aba-aba berikut diatasnya

<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: 200px; font-size: 15px;font-weight:bold;’ type=’button’ value=’Lihat Komentar’/></div>
<div style=’border: 0px inset ; margin: 0px; padding: 0px;’><div style=’display: none;’>

5. Lalu letakkan aba-aba epilog </div> dibawah aba-aba warna merah (lihat pada aba-aba diatas)

</div>
</div>
</div>

6. Penerapannya ibarat dibawah ini

<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: 200px; font-size: 15px;font-weight:bold;’ type=’button’ value=’Lihat Komentar’/></div>
<div style=’border: 0px inset ; margin: 0px; padding: 0px;’><div style=’display: none;’>

<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>

</div>
</div>
</div>

7. Selesai, simpan