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='"comment-author " + 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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Komentar'; }' 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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Komentar'; }' 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='"comment-author " + 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...
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='"comment-author " + 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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Komentar'; }' 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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Komentar'; }' 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='"comment-author " + 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:
- 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...
- 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..
4.5
»
Postingan Terkait
» Rating
12 comments :
di ctrl d dulu, buat di coba, makasih mas ya...
Oke lah...
sy koq gak bisa sob.. katanya ada yang eror.. mohon pencerahan
Jika sudah sesuai tip seharusnya tidak terjadi error...
Atau mungkin SOBAT BISA COBA menggunakan tampilan blogger lawas SAAT EDIT, caranya dengan link berikut:
http://www.blogger.com/html?blogID=XXXXX&tpl=true
gANTI XXXXX DENGAN iD BLOG ANDA... Pasalnya ane juga pernah di bilang error terus pas edit template pake tampilan blogger yang baru, tapi waktu ane coba pakai tampilan blogger lawas bisa...
yang sy temukan cuma ini
dl class='comments-block' id='comments-block'
apa yang ini sama aja dengan kode pertama di atas??.. soalnya ane edit pake tampilan lawas itu, masih eror juga sob.. mohon bantuannya
@arief ahsan: Sudah ane lenkapi kode selengkapnya gan seperti diatas, namun bila tidak jadi coba agan kirim ane template kayak agan, atau link tempat downloadnya biar nanti ane lihat siapa tahu aja ane bisa ngebantu.. Thank
ini sob link buat download template.a http://btemplates.com/2010/blogger-template-my-menu/
kalo udah bisa dan berhasil.. mohon konfirmasi yah kawan.. thanks before
@arief: Ya nanti tak usahakan...
waaahhh berhasil sob.. thanks banget yah bro.. sangat bermanfaat..kita udah tuker link belum sob.. tuker link yuk :)
@arief: ya selamat ya gan sudah berhasil, oke gan kita coba tuker link... hehe
makasih gan, sudah berhasil, sempat tidak berhasil, ternyata salah, sebelumnya ane pakai tutorial dari postingan yang satunya
soalnya ane ga ngerti apa itu TREADET
ahihihi ^_^
thanks :D
Sip Masbro........
Post a Comment