Kebetulan Sesuai dengan yang request Tutorial kali ini akan menjelaskan cara membuat komentar bertingkat seperti wordpress. Tutorial ini tidak menggunkan threaded comment blogger yang baru, tetapi menggunakan sistem komentar lama, dan dimodifikasi sehingga menyerupai komentar wordpress (wordpress threaded comment). Artikel asli ada di Artistutorial.
Untuk membuat threaded comment pada system komentar blogger yang baru (baca: Cara Membuat Threaded Comment di Blogger / Blogspot). Untuk tutorial kali ini, kita akan membuat threaded comment pada sistem komentar lama, seperti screenshoot di bawah ini:
Lihat Demo di Blog ini Tampilan Kaya seperti diatas , sobat bisa nyobain sendiri berkomentar di postingan ini .
Tiga langkah mudah
1. Menambahkan kode CSS2. Mengganti kode HTML
3. Menambahkan JavaScript
Menambahan Kode CSS
1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap
3. Centang Expand Template Widget
4. Tambahkan kode dibawah ini diatas
]]></b:skin>
KODE :
Menambahkan JavaScript
Tambahkan kode dibawah sebelum</body>
Kode :
Mengganti Kode HTML
1. Cari kode dibawah ini<b:includable id='comments' var='post'>
kode yang harus diganti
</b:includable>
2. Simpan kode dibawah ini antara kode <b:includable id='comments' var='post'> dan
</b:includable><div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments > 0'> <b:if cond='data:post.numComments == 1'> <span id='cm_total'>1</span> comment <b:else/> <span id='cm_total'><data:post.numComments/></span> comments </b:if> </b:if> </h4> <div id='cm_reply_css'/> <div class='cm_pagenavi' id='cm_page'/> <div id='cm_block'> <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.isDeleted'> <b:else/> <div expr:id='data:comment.anchorName'> <div class='cm_wrap'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.author == data:post.author'> <div class='cm_head'> <div class='cm_avatar_a'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div class='cm_reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a> </div> </div> <b:else/> <div class='cm_head'> <div class='cm_avatar'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div class='cm_reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a> </div> </div> </b:if> <b:if cond='data:comment.author == data:post.author'> <div class='cm_entry_a'> <span class='cm_arrow'/> <div class='cm_info_a'> <div class='cm_name_a'> <b:if cond='data:comment.author == data:post.author'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b><data:comment.author/></b> </b:if> </b:if> </div> <b:if cond='data:comment.author == data:post.author'> <div class='cm_date_a'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> <b:else/> <div class='cm_date'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </b:if> </div> <b:if cond='data:comment.author == data:post.author'> <div class='comment-body-author'> <p><data:comment.body/></p> </div> <b:else/> <p><data:comment.body/></p> </b:if> </div> <b:else/> <div class='cm_entry'> <span class='cm_arrow'/> <div class='cm_info'> <div class='cm_name'> <b:if cond='data:comment.author == data:post.author'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b><data:comment.author/></b> </b:if> </b:if> </div> <b:if cond='data:comment.author == data:post.author'> <div class='cm_date_a'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> <b:else/> <div class='cm_date'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </b:if> </div> <b:if cond='data:comment.author == data:post.author'> <div class='comment-body-author'> <p><data:comment.body/></p> </div> <b:else/> <p><data:comment.body/></p> </b:if> </div> </b:if> </div> </div> </b:if> </b:loop> </div> <div class='cm_pagenavi' id='cm_page_copy'/> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> </div>
3. Ganti __BlogID__ dengan blogID anda
4. Reply bisa diganti dengan Balas
5. Simpan, dan Selesai
Sumber :
