Disain Grafis, Tips dan Triks

Cara Membuat Spoiler pada Kotak Komentar Blogger/Blogspot



Cara Membuat Spoiler pada Kotak Komentar Blogger/Blogspot


Tutorial blog kali ini membahas seputar cara membuat/memasang tombol spoiler pada kotak komentar blogger. Kalau kotak komentar blog terlihat memanjang ke bawah karena terlalu banyak para komentator yang berkomentar di blog anda, maka tombol spoiler perlu dipasang agar 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 lalu cari kode seperti 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 kode 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 kode penutup </div> dibawah kode warna merah (lihat pada kode diatas)

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

6. Penerapannya seperti 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

Cara Membuat Spoiler pada Kotak Komentar Blogger/Blogspot