Cara Membuat Komentar Blogspot Sama Seperti WordPress (Thread Reply Comment)

Cara membuat thread reply comment pada blogspot - Setelah muter - muter mbah google mencari trik ini, akhirnya ketemu juga. Waktu pertama ketemu trik yang seperti ini di google, saya senang sekali. Hanya saja trik yang pertama kali saya temukan memiliki sedikit kekurangan, jika menjawab komentar orang lain komentar kita berada dipaling bawah, bukan dibawah komentar yang ingin kita jawab.

Sebenarnya trik komentar seperti ini adalah komentar dari platform WordPress. Dan menurut saya keren kalau bisa dipraktekkan di blog saya, platform blogspot. Jadi saya berusaha untuk mencari trik ini untuk blog saya. Saya sering memasukkan keyword " cara membuat threaded reply comment di blogspot ", tapi posting yang muncul itu triknya memiliki kekurangan seperti diatas. Jadi saya putuskan untuk posting di blog saya, karena menurut saya posting seperti ini Insya Allah banyak dikunjungi ... Amien ... Yuk langsung saja sob ...

• Dasbor > Rancangan / Layout
• Ke Edit HTML
• Copy kode dibawah ini

<script type="text/javascript">  //<![CDATA[/*  --- Threaded Comments ---v 0.9.3 15th March 2009By Rijal Islamihttp://caratrikblog.blogspot.com */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=="[Sembunyikan]"){for(var A in B){if(D[A]=="both"||D[A]=="hide"){hideElement(B[A])}}C.innerHTML="[Tampilkan]"}else{for(var A in B){if(D[A]=="both"||D[A]=="show"){showElement(B[A])}}C.innerHTML="[Sembunyikan]"}};// ]]></script>

• Paste kode diatas tepat sebelum (diatas) kode <b:skin>
• Kemudian copy kode dibawah ini lagi

.comment-segment {padding:5px;margin-top: 10px;margin-right: 10px;}.comment-level-0 {padding:5px;margin-left: 10px;}.comment-level-1 {padding:5px;margin-left: 25px;}.comment-level-2 {padding:5px;margin-left: 40px;}.comment-level-3 {padding:5px;margin-left: 55px;}.comment-level-gt3 {padding:5px;margin-left: 70px;}.blog-author-comment {padding:5px;background-color: #FFFFFF;border: 1px solid #FFFF99;}.blog-nonauthor-comment {padding:5px;background-color: #FFFFFF;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;} 

• Paste kode diatas tepat sebelum (diatas) ]]></b:skin>
• Simpan Template !

Istirahat dulu sob, barang kali sobat pusing ...
Sudah cukup istirahatnya, kita lanjut yuk ...

• Dasbor > Rancangan / Layout
• Ke Edit HTML
• Centang " Expand Template Widget "
• Cari kode <b:includable id='comments' var='post'>
• Ganti kode <b:includable id='comments' var='post'> sampai kode </b:include> diatas kode <div id='sidebar-wrapper'> dengan kode dibawah 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>      <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;" >[Sembunyikan]</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;" >[Sembunyikan]</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>

Simpan Template !

Mungkin ada sobat yang kurang paham akan trik pasang thread reply comment di blogspot, silahkan bisa bertanya (komentar). Soalnya saya pusing mau jelasin apalagi. Sekian dulu sob ^^ ...

Selesai