<b:includable id='custom-comments' var='post'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>
<!-- bambangpage.blogspot.com -->
<h4>
Ada
<b:if cond='data:post.numComments == 1'>
1 Komentar Pada "<data:post.title/>":
<b:else/>
<data:post.numComments/> Komentar Pada "<data:post.title/>":
</b:if>
</h4>
<!-- bambangpage.blogspot.com -->
<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> 
<data:post.commentRangeText/> 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>
<div id='comments-area'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><b:else/>
<b:if cond='data:comment.author == data:post.author'><div class='author-comment'></b:if>
<div class='comment-item clearfix' expr:id='data:comment.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<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> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
</div> <!-- comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div> <!-- avatar-box -->
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<data:comment.body/>
</b:if>
</div> <!-- comment-body -->
<b:loop values='data:post.comments' var='replies'>
<b:if cond='data:replies.inReplyTo == data:comment.id'>
<b:if cond='data:replies.author == data:post.author'><div class='author-comment'></b:if>
<div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:replies.authorUrl'>
<a expr:href='data:replies.authorUrl' rel='nofollow'> <data:replies.author/></a>
<b:else/>
<data:replies.author/>
</b:if> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
</div> <!-- reply comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:replies.favicon'>
<img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:replies.authorAvatarImage/>
</b:if>
</div> <!-- reply avatar-box -->
<div class='comment-body'>
<b:if cond='data:replies.isDeleted'>
<span class='deleted-comment'><data:replies.body/></span>
<b:else/>
<data:replies.body/>
</b:if>
</div> <!-- reply comment-body -->
<span class='comment-bottom-line'>
<a class='delete-btn' data-icon='&times;' href='<data:replies.deleteUrl/>' title='<data:top.deleteCommentMsg/>'>Hapus</a>
</span>
</div> <!-- reply comment-reply -->
<b:if cond='data:replies.author == data:post.author'></div></b:if>
</b:if> <!-- replies.inReplyTo -->
</b:loop>
<span class='comment-bottom-line'>
<b:if cond='data:comment.isDeleted != "true"'><a class='reply-btn' data-icon='&dArr;' href='javascript:replyTo("<data:comment.id/>");'>Jawab</a></b:if><a class='delete-btn' data-icon='&times;' href='<data:comment.deleteUrl/>' title='<data:top.deleteCommentMsg/>'>Hapus</a>
</span>
<div expr:id='"form-container-" + data:comment.id'/>
</div> <!-- comment-item -->
<b:if cond='data:comment.author == data:post.author'></div></b:if>
</b:if> <!-- comment.inReplyTo -->
</b:loop>
</div>
<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> 
<data:post.commentRangeText/> 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>
<div class='custom-comment-form' id='custom-comment-form'>
<h4>Tulis dan Publikasikan Komentar Anda :</h4>
<p>Tulis Komentar Anda Disini :</p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');</script>
<a class='cancel-reply-btn' href='javascript:replyTo("cancel");'>Cancel Jawaban</a>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = "50px";
frame.style.visibility = "hidden";
frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = "250px";
this.style.visibility = "visible";
};
}
//]]>
</script>
</b:if>
</section>
</b:includable>
Setelah sekian lama mencari dan membandingkan tutorial tentang threaded komen di dunia maya ini , Akhirnya pencarian berakhir pada sebuah tutorial tentang threded komen dari bX-NicoNico , di mana sistem threded komen yang di buatnya menggunakan tag blogger data:comment.inReplyTo yang akan mengembalikan id dari komentar induk , dan menggunakan loop blogger untuk menunjukan balasan komentar . Dari artikel tersebutlah saya mencoba mempelajari dan mengembangkan kode-kode untuk threded komen yang akan kita bahas kali ini , baik di bagian Css maupun HTML . Sesuai dengan judul postingan ( Modifikasi Threded Komen Di blogger Ala Bp ) , Threded Komen yang akan kita buat kali ini , telah saya rubah kata-katanya kedalam bahasa indonesia baik pada bagian author maupun pada tomblol reply dan delete sehingga menjadi Jawab dan Hapus .
| 
