Saat ini, Blogger/Blogspot sudah melakukan banyak improvisasi dengan penambahan berbagai fitur yang dulu tidak ada di blog blogspot. Namun, ada satu fitur yang sebenarnya aku sukai, namun belum diakomodasi oleh Blogger, yakni threaded comment alias komen bertingkat, dimana kita bisa langsung membalas komen yang masuk, tepat di bawahnya.
Beruntung aku menemukan blog
Shams Mahmood yang memberikan panduan lengkap tentang bagaimana membuat komen bertingkat atau threaded comment.
Adapun dalam tutorial tersebut, kita nantinya akan dapat :
- membalas komentar sampai kedalaman beberapa tingkat
- memberi warna background berbeda untuk komentar pemilik blog
- menyembunyikan/menampilkan komentar
Bagaimana cara membuat comment threading ? Simak panduannya berikut ini. Sebelumnya pastikan anda membackup template lama anda.
1. Cari tag <b:skin> dan Kopi file javascript berikut di atasnya :
2. Kopi kode css berikut di bawah tag <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: #F0F0BE;
border: 1px solid #FFFF99;
}
.blog-nonauthor-comment {
background-color: #B4C8F0;
border: 1px solid #7296E2;
}
.deleted-comment {
color: gray; font-STYLE: italic
}
.delete-comment-icon {
background: url("http://www.blogblog.com/rounders3/icon_delete13.gif")
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;
}
3. Cari kode di template anda yang menampikan komen. Di template yang aku pakai, dan mungkin di kebanyakan template, kode tersebut kira-kira begini :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
...
</div>
</b:includable>
Dan gantikan kode tersebut dengan kode yang akan membuat komentar mempunyai link untuk langsung membalas (comment threading) langsung di bawahnya. berikut kodenya :
<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>
<b:if cond='data:post.numComments > 0'>
<!-- 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'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<!-- Loop through the comments adding the comment bodies in a hidden div -->
<b:loop values='data:post.comments' var='comment'>
<div style="display: none;" expr:id='"comment-body-" + data:comment.id' >
<data:comment.body/>
</div>
</b:loop>
<!-- Now create the comment using our javascript -->
<script type="text/javascript">
// USE THIS if YOU Have multiple Authors adding them in a comma separated form after removing the '//' from the next line
// var BLOG_AUTHORS = ['http://www.blogger.com/profile/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = 'http://www.blogger.com/profile/10301627897367423203';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';
var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>
buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete,
"<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').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' +
' said... ' + '\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">How to Reply to this comment</h4>' + '\n' +
' <span>' + '\n' +
' To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' +
' <ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
' </ul>' + '\n' +
' is the <b>first line</b> of your comment. ' + '\n' +
' <br />' + '\n' +
' <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
' >Click here to enter your reply</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;" >Reply</a></span> ' + '\n' +
' <span><a href="#comment-${COMMENT.ID}">Permalink</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>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
4. Ganti profil author :
* Jika blog anda punya beberapa penulis
var BLOG_AUTHORS =
['http://www.blogger.com/profile/firstauthor',
'http://www.blogger.com/profile/otherauthor'];
* atau jika hanya anda satu-satunya penulis =
var BLOG_AUTHOR = 'http://www.blogger.com/profile/onlyauthor';
dengan profil blogger anda sehingga nantinya komentar anda atau penulis artikel akan mempunyai background warna yang berbeda dengan komentar pengunjung lain. Lihat di profil blogger anda. Contohnya profilku adalah http://www.blogger.com/profile/01192650621511787382
Related Post atau artikel terkait jika dipasang di tiap artikel dapat meningkatkan pageview blog kita. Selain itu, adanya link ke artikel lain di blog akan memberikan inbound link yang tentunya bagus untuk SEO. Bagi pengunjung, adanya link artikel terkait ini mungkin bisa lebih memberikan pencerahan dan pendalaman untuk informasi yang sedang dicari.
