Memasang Threaded Comment

Sekarang Blogspot dah boleh guna, rujuk blog aku kalau tak percaya.

Aku kagum dengan Shams Mahmood sebab berjaya menjadikan sistem threaded comment ini untuk blogspot. Terima kasih kepada Eins sebab sudi berkongsi tutorial ini dengan aku. Ianya tidak menggunakan sebarang aplikasi sumber ketiga seperti Debate Comments, Disqus dan banyak lagi. Apa yang menarik threaded comment ini menggunakan sistem komen sedia ada dari blogspot, kamu hanya perlu menambah sedikit javaskrip untuk mengaplikasikannya.

Bagi yang tidak pernah mendengar tentang apa itu threaded comment memang sedikit menyukarkan, ditambah lagi Blogspot sudah boleh mengaplikasikan sistem ini.

Walaubagaimanapun tutorial ini hanya sesuai untuk sistem komen secara full page, ianya mungkin ada sedikit masalah untuk sistem komen secara embbedded below post atau pop-up page. Kamu boleh mencubanya dan jika ada masalah sila kemukakan diruangan komen. Buat masa sekarang ianya masih dalam peringkat percubaan.

Memasang Threaded Comment

01. Pilih Template > Edit Html (tick Expand Widget Templates).

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya.

.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: #e2eef2;
border: 1px solid #7296e2;
padding: 5px;

}
.blog-nonauthor-comment {

background-color: #f8f8f8;
border: 1px solid #dddddd;
padding: 5px;

}
.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: 5px;

}

04. Cari kod ini.

</head>

05. Tambahkan kod ini di atasnya.

<script type="text/javascript">

//<![CDATA[
/*
http://shamsmi.blogspot.com
http://dilarangmelarang.com (translated)
*/
function Author(C,A,B){this.id=C;this.name=A;this.url=B;this.toString=function(F){var E="\t";if(F){for(var D=0;D<F;D++){E+="\t"}}return"Author[\n"+E+"id="+this.id+", \n"+E+"name="+this.name+", \n"+E+"url="+this.url+"\n"+E+"]"}}function Comment(E,H,G,C,B,D,F,A){this.id=E;this.sequenceNumber=H;this.postedTime=G;this.body=F;this.deleted=A;this.deleteUrl=B;this.deleteText=D;this.parentId="";this.children=new Array();this.level=0;this.author=C;this.getChildCount=function(){return this.children.length};this.addChild=function(I){this.children[this.getChildCount()]=I.id;I.parentId=this.id;I.level=this.level+1};this.toString=function(K){var J="\t";if(K){for(var I=0;I<K;I++){J+="\t"}}return"Comment[\n"+J+"id="+this.id+", \n"+J+"sequence="+this.sequenceNumber+", \n"+J+"deleted="+this.deleted+", \n"+J+"parentId="+this.parentId+", \n"+J+"children=["+this.children+"], \n"+J+"level="+this.level+", \n"+J+"author="+this.author.toString(1)+", \n"+J+"posted time="+this.postedTime+", \n"+J+"body="+this.body+"\n"+J+"]"}}function trimBrsFromString(C){var F=trimString(C);var B=["<br>","<br >","<br/>","<br />","<BR>","<BR >","<BR/>","<BR />"];if(F){var E=true;while(E){E=false;for(var D in B){var A=B[D];if(F.indexOf(A)==0){F=F.substring(A.length);F=trimString(F);E=true}var H=F.length;var G=F.lastIndexOf(A);if(G>=0&&G==H-A.length){F=F.substring(0,G);F=trimString(F);E=true}}}}return F}function trimString(A){var E="";if(A){var D=false;for(var B=0;B<A.length;B++){var F=A.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true}if(D){E+=F}}D=false;var C=-1;for(var B=E.length-1;!D&&B>0;B--){var F=E.charAt(B);if(!D&&F!=" "&&F!="\n"&&F!="\t"){D=true;C=B}}if(C>0){E=E.substring(0,C+1)}}return E}function addItem(A,B){A[B.id]=B}function getAllItems(C){var D=new Array();var B=0;for(var A in C){D[B]=C[A];B++}return D}function getItemsCount(C){var B=0;for(var A in C){B++}return B}var ALL_AUTHORS=new Object();var ALL_COMMENTS=new Object();function getNewAuthorId(){var C=1;for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]&&ALL_AUTHORS[A].id){var B=ALL_AUTHORS[A].id;if(B>=C){C=B+1}}}return C}function createAuthor(C,A,B){return new Author(C,A,B)}function addAuthor(A){addItem(ALL_AUTHORS,A)}function getAllAuthors(){return getAllItems(ALL_AUTHORS)}function getAuthorsCount(){return getItemsCount(ALL_AUTHORS)}function findAuthor(C,B){for(var A in ALL_AUTHORS){if(ALL_AUTHORS[A]){if(ALL_AUTHORS[A].name==C&&ALL_AUTHORS[A].url==B){return ALL_AUTHORS[A]}}}return null}function getNewCommentSequence(){var C=1;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]&&ALL_COMMENTS[A].sequenceNumber){var B=ALL_COMMENTS[A].sequenceNumber;if(B>=C){C=B+1}}}return C}function createComment(E,H,G,C,B,D,F,A){return new Comment(E,H,G,C,B,D,F,A)}function addComment(A){addItem(ALL_COMMENTS,A)}function getAllComments(){return getAllItems(ALL_COMMENTS)}function getRootComments(){var D=new Array();var C=0;for(var A in ALL_COMMENTS){var B=ALL_COMMENTS[A];if(B&&B.level==0){D[C]=B;C++}}return D}function getCommentsCount(){return getItemsCount(ALL_COMMENTS)}function findComment(B){for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].id==B){return ALL_COMMENTS[A]}}}return null}function findLastCommentByAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name==C){B=ALL_COMMENTS[A]}}}return B}function findLastCommentByPartialAuthorName(C){var B=null;for(var A in ALL_COMMENTS){if(ALL_COMMENTS[A]){if(ALL_COMMENTS[A].author.name.toLowerCase().indexOf(C.toLowerCase())==0){B=ALL_COMMENTS[A]}}}return B}function addCommentHierarchy(D,C){if(D){C[C.length]=D;var A=D.children;for(var B in A){addCommentHierarchy(findComment(A[B]),C)}}}function getCommmentsInSortedOrder(){var D=new Array();var A=getRootComments();for(var B in A){var C=A[B];addCommentHierarchy(C,D)}return D}function ParsedResult(A,B){this.parentComment=A;this.body=B;this.toString=function(){return"[parentComment="+this.parentComment+", body="+this.body+", ]"}}function findParentCommentFromDescriptor(A){var B=findComment(A);if(B==null){B=findLastCommentByAuthorName(A)}if(B==null){B=findLastCommentByPartialAuthorName(A)}return B}function parseCommentBody(B,F){B=trimString(B);var A=B.indexOf("@");if(A==0){var H=B.indexOf("\n",0);var G=B.indexOf("<",0);var D=H;if(G>0&&(G<D||D<0)){D=G}if(D>2){var O=B.substring(1,D);O=trimString(O);var K=findParentCommentFromDescriptor(O);if(K==null){var J=O.indexOf(" ");if(J>0){var N=trimString(O.substring(0,J));K=findParentCommentFromDescriptor(N);if(K!=null){D=J+1}}}if(K!=null){var P=null;var Q=D;var C=B.indexOf("@",Q+1);if(C>Q){var M=trimString(B.substring(C));P=parseCommentBody(M,C)}if(P&&P.length>0&&P[0].parentComment!=null){var L=trimString(B.substring(D,C));var I=new ParsedResult(K,L);var E=[I].concat(P);return E}else{var L=trimString(B.substring(D));var I=new ParsedResult(K,L);return[I]}return E}}}var I=new ParsedResult(null,B);return[I]}function buildComment(C,K,H,L,G,I,M,A){var F=findAuthor(C,K);if(!F){F=createAuthor(getNewAuthorId(),C,K);addAuthor(F)}var D=parseCommentBody(A,0);for(var J in D){var E="";E=D[J].body;E=trimBrsFromString(E);var B=createComment(H+"."+J,getNewCommentSequence(),L,F,I,M,E,G);addComment(B);if(D[J].parentComment!=null){D[J].parentComment.addChild(B)}}}function substituteConstant(A,D,C){var B=A;while(B.indexOf(D)>=0){B=B.replace(D,C)}return B}function substituteConstantIfValueExists(D,A,I,C,H){var J=D;var F=J.indexOf(A);var E=J.indexOf(I);while(F>0&&E>F){var B=J.substring(F,E+I.length);var G=null;if(H&&H.length>0){G=substituteConstant(B,C,H);G=G.substring(A.length,G.length-I.length)}else{G=""}J=J.replace(B,G);F=J.indexOf(A);E=J.indexOf(I)}return J}function isBlogAuthor(B){var A=false;if(window.BLOG_AUTHORS){for(var C in BLOG_AUTHORS){if(BLOG_AUTHORS[C]==B){A=true;break}}}else{if(window.BLOG_AUTHOR){A=(BLOG_AUTHOR==B)}}return A}function applyCommentTemplateToComment(F,E){var A=F;A=substituteConstant(A,"${COMMENT.ID}",E.id);A=substituteConstant(A,"${COMMENT.TIMESTAMP}",E.postedTime);A=substituteConstant(A,"${COMMENT.AUTHOR.NAME}",E.author.name);var C=(E.level>3)?"gt3":E.level;A=substituteConstant(A,"${COMMENT.LEVEL}",C);A=substituteConstantIfValueExists(A,"${COMMENT.AUTHOR.URL.EXISTS.START}","${COMMENT.AUTHOR.URL.EXISTS.END}","${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.AUTHOR.URL}",E.author.url);A=substituteConstant(A,"${COMMENT.DELETE.URL}",E.deleteUrl);A=substituteConstant(A,"${COMMENT.DELETE.TEXT}",E.deleteText);A=substituteConstant(A,"${COMMENT.BODY}",E.body);var D=isBlogAuthor(E.author.url)?"blog-author-comment":"blog-nonauthor-comment";A=substituteConstant(A,"${BLOG.AUTHOR}",D);A=substituteConstant(A,"${BLOG.POST.COMMENT.LINK}",BLOG_POST_COMMENT_LINK);var B=(E.deleted)?"deleted-comment":"";A=substituteConstant(A,"${COMMENT.DELETED.STYLE}",B);document.writeln(A)}function applyCommentTemplate(C){var D=getCommmentsInSortedOrder();for(var A in D){var B=D[A];applyCommentTemplateToComment(C,B)}}function setElementDisplay(B,C){var A=document.getElementById(B);if(A){A.style.display=C}}function setElementsDisplay(B,C){for(var A in B){setElementDisplay(B[A],C)}}function showElements(A){setElementsDisplay(A,"block")}function hideElements(A){setElementsDisplay(A,"none")}function showElement(A){setElementDisplay(A,"block")}function hideElement(A){setElementDisplay(A,"none")}function toggleElementDisplays(C,B,D){if(C.innerHTML=="[hide]"){for(var A in B){if(D[A]=="both"||D[A]=="hide"){hideElement(B[A])}}C.innerHTML="[show]"}else{for(var A in B){if(D[A]=="both"||D[A]=="show"){showElement(B[A])}}C.innerHTML="[hide]"}};// ]]>

</script>

07. Cari kod ini.

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
...
</div>

</b:includable>

Ini adalah sebahagian kod. Pastikan semua kod dicari hingga akhir.

08. Gantikan kod ini dengan kod di atas :

<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/onlyauthor';
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' +
' <span class="reply-guide-example" >' + '\n' +
' <b>Example:</b><br />' + '\n' +
' @${COMMENT.ID} <br />' + '\n' +
' My <b>first line</b> is one of the values <br />' + '\n' +
' shown on the left :) ' + '\n' +
' </span>' + '\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>

Tukarkan onlyauthor dengan id profile kamu jika kamu mempunyai 1 author. Tapi jika kamu lebih dari seorang author kamu boleh gantikan firstauthor, secondauthor dan thirdauthor dengan id profile masing-masing. Ianya untuk membezakan komen anda dengan komen penkomen lain.

09. Pilih Save. Lihat contohnya di sini.