Membuat spoiler di komentar Blogspot Non Treaded

Selamat berjumpa lagi di fayescool.blogspot.com yang pada kesempatan ini akan mencoba share Tentang "Membuat spoiler di komentar Blogspot Non Treaded" diblog butut ini. Seperti apakah info tentang "Membuat spoiler di komentar Blogspot Non Treaded" ini, mari kita cekidot berikut ini:

Awal cerita ada sobat blogger yang bertanya, bagaimana cara membuat komentar menjadi kaya spoiler. Seperti ini nih komentarnya:


Seperti ini nih kira-kira komentarnya:

mas, makasih tutornya.
tapi mau nanya ni, kalau bikin koment yang seprti ini gimana ya? yang bisa kaya spoiler begitu?

Cara membuat spoiler di kotak komentar sebagai berikut gan:

Untuk template yang bukan treaded/bertingkat:

Sebelum edit template selalu simpan template ditempat aman gan, dengan cara dibackup dulu templatenya di komputer yach, biar aman dan pasti lebih nyaman dan gak kewatir bila nanti terjadi kegagalan.. Oke langsung cekibrooooottt:

1. Login di blogger.com kemudian ke langsung saja edit tmplate html, centang expand widget content...

2. Cari kode seperti berikut ini (agar mudah klik ctrl+f pada keybord, akan muncul sebuah kotak pencarian. Lalu masukkan sepenggal kodenya yang mau dicari):

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

setelah ketemu masukkan kode berikut ini diatas kode no.2 diatas:

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

3. Kemudian Masukkan Kode berikut dibawah kode no.2:

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

Selengkapnya kode akan menjadi seperti ini:

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

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

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

Lalu klik Save, semoga jadi ya gan...

Catatan:

1. kode yanng beginian <!-- spoiler komentar part2 end --> hanya tambahan gan untuk agar mudah mencari kodenya kalau suatu saat mau dirubah lagi. Ane biasa menggunakan cara ini...
2. Kata Lihat Komentar yang ane cetak tebal bisa diganti sesuai keinginan misal, View Comment atau yang lain (kalau diganti keduanya diganti sama gan, agar gak berubah ubah saat tombolnya di klik nanti)

Hasil yang pernah ane terapkan:



Oke gan namun cara diatas tidak berlaku (tidak akan berpengaruh) untuk form komentar jenis treaded bawaan blogger. Untuk komentar treaded bawaan blogger baca Membuat spoiler di komentar treaded / bertingkat Blogspot

Demikianlah sharing ane tentang "Membuat spoiler di komentar Blogspot Non Treaded" di fayescool.blogspot.com ada salah apapun saya mohon maaf. Happy Blogging..

Posted by Fayes Cool » Rating 4.5 » at Tuesday, March 27, 2012

Postingan Terkait