Cara membuat kotak komentar dengan fasilitas reply

Assalamu 'alaikum waroh matullahi wabarakatuh.
Seperti yang kalian ketahui sebelumnya, bahwa setting default dari blogger, bahwa kotak komentar, tidak ada fasilitas reply-nya. Mungkin disini saya akan jelaskan yang dimaksud dengan Reply. Fasilitas reply adalah fasilitas dimana seseorang bisa membalas komentar orang lain dalam 1 Artikel blog, yang mana komentar itu ada di bawah komentar yang di komentar. Kalo bingung, lihat aja contohnya di kotak komentarku, di bawah ini. atau lihat gambar ini




Kalo mau mencoba, silahkan baca artikel di bawah ini:

1. Login ke akun bloggermu
2. Tata Letak > Edit HTML
3. Download Template Lengkap dahulu untuk berjaga-jaga jika ada kekeliruan.
4. Beri tanda centang pada Expand Template Widget
5. Letakkan kode di bawah ini di atas <b:skin>

<script src='http://komenbalas.googlecode.com/files/commentreply%282%29.js' type='text/javascript'/>

6. Setelah itu, letakan kode berikut, di atas ]]></b:skin>

.comment-segment {
margin-top: 10px;
margin-right: 10px;
}
.comment-level-0 {
margin-left: 10px;
}
.comment-level-1 {
margin-left: 25px;
}
.comment-level-2 {
margin-left: 40px;
}
.comment-level-3 {
margin-left: 55px;
}
.comment-level-gt3 {
margin-left: 70px;
}
.blog-author-comment {
background-color: #F4FA58;
border: 1px solid #FFFFFF;
}
.blog-nonauthor-comment {
background-color: #FFFFFF;
border: 1px solid #000000;
}
.deleted-comment {
color: gray; font-STYLE: italic
}
.delete-comment-icon {
background: url(&amp;quot;http://www.blogger.com/img/icon_delete13.gif&amp;quot;)
no-repeat;
}
.comment-time {
font-size: 80%;
margin: inherit;
padding-left: 10px;
padding-bottom: 10px;
}
.reply-guide {
background-color: #FFFFFF;
border: #076a93 1px dotted;
display: none;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0.75em;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
.reply-guide-header {
color: #076a93;
padding-top: 10px;
}
.reply-guide-list {
list-style: none;
padding-left: 2px;
margin-left: 2px;
}
.reply-guide-example {
font-size: 85%;
margin-right: 5px;
margin-bottom: 10px;
float: right;
border: 1px dotted #076a93;
padding: 5 5 5 5;
}

ganti tulisan berwarna biru, dengan keinginan anda

7. Cari kode seperti ini:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
...
</div>
</b:includable>

titik titik di atas menunjukan bahwa script masih panjang. Gunakan kode yang berwarna merah, agar mudah mencari lokasi


8. Ganti kode di atas dengan kode di bawah ini:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>


<!-- Loop through the comments adding the comment bodies in a hidden div -->
<b:loop values='data:post.comments' var='comment'>
<div expr:id='&quot;comment-body-&quot; + data:comment.id' style='display: none;'>
<data:comment.body/>
</div>
</b:loop>
<!-- Now create the comment using our javascript -->
<script type='text/javascript'>
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = &#39;http://www.blogger.com/profile/11704767160035793421&#39;;
var BLOG_POST_COMMENT_LINK = &#39;<data:post.addCommentUrl/>&#39;;
var eCommentDelete = false;
var eAuthorUrl = &#39;&#39;;
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = &#39;&#39;;
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = &quot;<data:comment.authorUrl/>&quot;;
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>

buildComment(&quot;<data:comment.author/>&quot;, eAuthorUrl,
&quot;<data:comment.id/>&quot;, &quot;<data:comment.timestamp/>&quot;, eCommentDelete,
&quot;<data:comment.deleteUrl/>&quot;, &quot;<data:top.deleteCommentMsg/>&quot;,
document.getElementById(&#39;comment-body-<data:comment.id/>&#39;).innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
' <a name="comment-${COMMENT.ID}"></a>' + '\n' +
' <span style="float: right; margin-right: 5px; " >' + '\n' +
' <a href="#" ' + '\n' +
' onclick="toggleElementDisplays(this, ' +
'[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
'[\'both\', \'both\', \'hide\']); return false;" >[hide]</a>' + '\n' +
' </span>' + '\n' +
' <span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
' Berkata... ' + '\n' +
' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
' <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
' <span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
' <h4 class="reply-guide-header">Bagaimana cara membalas komentar?</h4>' + '\n' +
' <span>' + '\n' +
' <span style="color: rgb(255, 0, 0);">Untuk membalas komentar, masukan <b>salah satu</b> kode di bawah ini, di kotak komentar yang sudah disediakan:</span> ' + '\n' +
' <ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
' </ul>' + '\n' +
' <span style="color: rgb(255, 0, 0);">Masukan kode di atas pada <b>baris pertama</b> (sebelum komentar)</span></b> ' + '\n' +
' <br />' + '\n' +
' <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
' ></a>' + '\n' +
' </span>' + '\n' +
' </div>' + '\n' +
' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
' <span><a ' +
'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" ><b>Reply</b></a></span> ' + '\n' +

' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon"> </span></a></span>' + '\n' +
' </div>' + '\n' +
'</div>' + '\n';

applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<!-- Include a post comment link before rendering the comments -->
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><bold>Bagaimana Pendapatmu?</bold></a>
</b:if>
</b:if>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

ganti tulisan yang berwarna merah dengan id blog anda

9. Selesai deh... selamat mencoba

eha iya, Ada salah satu sahabat saya yang bertanya kepada saya, begini kira-kira:

"Ga, carane ngasih balas-balas komentar iki pie? dishare dong?"

translate ke indonesia:

"Ga, bagaimana membalas komentar ini? dishare dong?"

jawabannya mudah kok, kli aja Tulisan REPLY di bawah komentar yang ingin anda balas

Sumber: Kang beben, Van Movic, dan saya lupa menuliskan, guru saya:MAS DOYOK, makasih semua...
dengan peng-editan sendiri