Update. Merubah tampilan dan Menambahkan emotikon simple ala facebook, photo avatar tanpa javascript dengan ukuran s35-c atau 35px x 35px
Thread Comments Blogger Hack tanpa Pop Up

Kali ini saya akan sedikit berbagi untuk anda yang suka dengan thread comment hack (Sistim Komentar Bersarang) dengan kedalaman dari 2 level / lebih, sebenarnya Thread comment yang akan saya bagikan ini adalah thread comment hack buatan Artisteer Tutorials

Karena thread comment hack dari beliau ini menggunakan pop up window untuk melakukan reply (Balas) pada komentarnya, saya mencari solusi agar reply (Balas) Komentarnya tidak menggunakan pop up window

Alhasil, saya menemukan sebuah elemen data untuk blogger yang akan menampilkan sebuah ID Komentar induk (ParentID) dari komentar balasan tersebut, saya temukan kode tersebut disini ⇒ bX-NicoNico, dengan begitu kita tidak perlu menggunakan pop up window untuk memasukkan ID komentar induknya, karena saya akan otomatis menampilkan pada komentar yang memiliki induk dengan tag kondisional.

Maka bisa disebut juga Thread Comment ini gabungan dari dua metode, hehe..

Lihat Demo

Mengaktifkan Fitur Komentar Bersarang Hack pada Blogger

Masuklah pada Editor HTML Template anda, dan temukan kode ]]></b:skin> atau </style>

Salinlah kode ini dan letakkan diatasnya

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
.comments{background-color:#fff;font:13px "Lucida Grande",Tahoma,Verdana,Arial,sans-serif!important;color:#999;padding:20px}
.comments a{color:#2D5E7B}
.cf:before,.cf:after{content:"";display:table}
.cf:after{clear:both}
.cl{display:block;clear:both}
#comments h4{font-size:18px;font-weight:normal;margin:20px 0}
.cm_wrap{margin-bottom:30px}
.delete{border-radius:4px;padding:9px 12px;color:#FFF;background-color:#8D2079}
.avatar-image-container{float:left;background-color:#F4F4F4;border:thin solid #E6E6E6;width:35px;height:35px;padding:4px;border-radius:6px}
.avatar-image-container img{width:35px;height:35px}
.avatar-image-container img[src$="blogblog.com/img/blank.gif"]{background:url('http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=35') no-repeat center center;}
.cm_reply,.cm_delete{padding:6px;color:#fff;text-align:center;text-decoration:none;border-radius:2px;background-color:#E5E5E5;font:11px/18px sans-serif;display:inline-block;width:44px;margin:3px 0 0;line-height:1;cursor:pointer;border-width:1px;border-style:solid;border-right:1px solid #C4C4C4;border-color:#E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4}
.cm_reply:hover,.cm_delete:hover{text-decoration:none!important;background-color:#fefefe}
.cm_body{padding:15px;border:1px solid #DDD;margin-left:50px}
.inner{padding:15px;border:1px solid #DDD}
.cm_header{padding:0;margin:0 0 10px;overflow:hidden}
.name{margin:0;padding:0;float:left}
.cm_text{margin:0 0 15px;font-size:13px;color:#333}
pre,i[rel="pre"]{padding:0.8em 1em;margin:0;background-color:#222;border-left:4px solid #40627E;font-size:13px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;line-height:1.4em;position:relative;word-wrap:normal;white-space:pre;overflow:auto}
blockquote,b[rel="quote"]{margin:0;position:relative;font-style:italic;border-left:3px solid #C69F73;padding:0 18px}
.cm_date{font-size:11px;color:#999;text-decoration:none;text-align:right}
.cm_pagenavi{font-size:10px;text-transform:uppercase;color:#666;text-shadow:1px 1px white;font-weight:bold}
.cm_pagenavi a{color:#666;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{color:#888;background:white;padding:4px;border:1px solid #E0E0E0}
.comment-form iframe{width:100%;height:240px;margin:0 0 20px}
.comment-form p{margin:40px 0 0;background-color:#fff;padding:10px;color:#000;line-height:20px;font-size:11px;border-radius:3px;position:relative;border:1px solid #ddd}
.comment-form p:before,.comment-form p:after{content:"";width:0;height:0;position:absolute;top:100%;left:15px;border-width:12px;border-image:none;border-style:solid;border-color:#ddd transparent transparent}
.comment-form p:after{left:17px;border-width:10px;border-color:#fff transparent transparent}
.loader{background-image:url('data:image/gif;base64,R0lGODlhKwALAPEAAP///2aZzLPM5WaZzCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=');background-repeat:no-repeat;background-position:50% 50%}
.batal{margin:0;padding:10px;border:1px solid #4B81AA;color:#fff!important;text-align:center;text-shadow:0 -1px 0 white;text-decoration:none;border-radius:2px;background-color:#468BC1;display:none;height:15px;width:30px}
.emo{cursor: pointer;width:17px;height:16px;display:inline-block;background-image:url("data:image/png;base64,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");background-repeat:no-repeat;background-size:auto auto;vertical-align:middle}
.smile{background-position:0 -324px}
.sad{background-position:0 -103px}
.melet{background-position:0 -375px}
.mrangas{background-position:0 -154px}
.oo{background-position:0 -120px}
.ok{background-position:0 -426px}
.koco{background-position:0 -137px}
.kocoi{background-position:0 -358px}
.uu{background-position:0 -392px}
.nangis{background-position:0 -69px}
.jahat{background-position:0 -86px}
.apa{background-position:0 0}
.kiss{background-position:0 -222px}
.hati{background-position:0 -189px}
.imut{background-position:0 -205px}
.lha{background-position:0 -341px}
.ori{background-position:0 -52px}
.oka{background-position:0 -35px}
.sepet{background-position:0 -409px}
.pacman{background-position:0 -239px}
.wkwk{background-position:0 -18px}
.emotki{margin:20px 0}
.emone{text-align:center;float:left}
.texte{padding:0;text-align:center;margin:0 0 0 3px;letter-spacing:1px;width:2em;vertical-align:middle;border:1px solid #ddd;box-shadow:medium none}
.batal:hover{text-decoration:none}
.cm_wrap .batal{display:block}
.cm_wrap[style*="margin-left:25%"] .cm_reply{display:none}

Sekarang cari kode <b:includable id='comments' var='post'> dan ganti kode tersebut dengan kode dibawah ini, sampai kode penutupnya yaitu kode </b:includable>

<b:includable id='comments' var='post'>
<b:if cond='data:blog.url == &quot;http://obs-demo.blogspot.com/2014/12/thread-comment-hack-whitout-popup-window.html&quot;'>
<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>
    <h4>
      <b:if cond='data:post.numComments &gt; 0'>
        <b:if cond='data:post.numComments == 1'>
          <span id='cm_total'>
            1
          </span>
          comment
          <b:else/>
          <span id='cm_total'>
            <data:post.numComments/>
          </span>
          comments
        </b:if>
      </b:if>
    </h4>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div id='comment_block'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.author == data:post.author'>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap admin cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container admin vcard'>
                  <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
                </div>
                <div class='cm_body'>
                  <section class='inner'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                            <data:comment.author/>
                          </a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text admin'>
                      <b:if cond='data:comment.inReplyTo'>
                        @<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a>
                      </b:if>
                      <data:comment.body/>
                    </div>
                    <footer class='cm_date'>
                      <a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                        <data:comment.timestamp/>
                      </a>
                    </footer>
                  </section>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>
                      Reply
                    </a>
                    <a class='cm_delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                      Hapus
                    </a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
          <b:else/>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container admin vcard'>
                  <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
                </div>
                <div class='cm_body'>
                  <section class='inner'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                            <data:comment.author/>
                          </a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text visitor'>
                      <b:if cond='data:comment.inReplyTo'>
                        @<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a>
                      </b:if>
                      <data:comment.body/>
                    </div>
                    <footer class='cm_date'>
                      <a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                        <data:comment.timestamp/>
                      </a>
                    </footer>
                  </section>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>
                      Reply
                    </a>
                    <a class='cm_delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                      Hapus
                    </a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
        </b:if>
      </b:loop>
    </div>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div class='comment-form' id='comment-form'>
      <p>
        <data:blogCommentMessage/>
        Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
        <br/>
        Untuk menyisipkan tautan dengan aman, gunakan kode 
        <code>
          [url=http://nama_situs.com]Teks Tautan[/url]
        </code>
        <br/>
        Untuk menyisipkan kode, gunakan tag 
        <code>
          &amp;lt;i rel=&quot;code&quot;&amp;gt;KODE ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Kode yang panjang bisa menggunakan tag 
        <code>
          &amp;lt;i rel=&quot;pre&quot;&amp;gt;KODE PANJANG ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Untuk menyisipkan gambar, gunakan kode 
        <code>
          [img]URL GAMBAR[/img]
        </code>
        <br/>
        Untuk menyisipkan judul, gunakan tag 
        <code>
          &amp;lt;b rel=&quot;h4&quot;&amp;gt;JUDUL ANDA DI SINI...&amp;lt;/b&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek tebal gunakan tag 
        <code>
          &amp;lt;strong&amp;gt;TEKS ANDA DI SINI...&amp;lt;/strong&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek huruf miring gunakan tag 
        <code>
          &amp;lt;em&amp;gt;TEKS ANDA DI SINI...&amp;lt;/em&amp;gt;
        </code>
        <br/>
        <br/>
        <br/>
      </p>
      <div class='emotki' id='emo_box'> :) :( :p :D :o ;) 8-) 8:) :/ :&#39;( 3:) O:) :* &amp;lt;3 ^_^ -_- o.O O.o &gt;:o :v :3
      </div>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
      </b:if>
      <div>
        <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='overflow:auto'/>
      </div>
      <a class='batal' href='javascript:replyTo(&quot;cancel&quot;);'>
        Batal
      </a>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>
        BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
      </script>
    </div>
  </b:if>
</div>
<script type='text/javascript'>
  //<![CDATA[
!function(e,a){function s(){var e=-1;if("Microsoft Internet Explorer"==navigator.appName){var a=navigator.userAgent,s=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=s.exec(a)&&(e=parseFloat(RegExp.$1))}return e}function l(e){var s=e.target.id,l=a.querySelector("#emo_box #"+s);l.parentNode.insertBefore(y,l.nextSibling),y.type="text",y.className="texte",y.value=l.title,y.select()}var r=(e.location.href,a.getElementById("comment_block")),t=r.innerHTML,n=[],o=[],i=[],c=0,p="",m="",d="",g=0,f=0,u=0,b=0,v="",h="",$="",x=a.getElementById("emo_box"),y=a.createElement("input"),k=a.getElementById("comment-editor").src.split("#");e.replaced=function(e,a){var s=a,s=s.replace(/^(<br ?\/?>|&nbsp;)+/i,"").replace(/(<br ?\/?>)+(:|;|\^|=)/gi,"<br> $2").replace(/^(&nbsp;|<br ?\/?>| <br ?\/?>)+/gi,"").replace(/\@<a href="\#c([0-9]+)\"( rel="nofollow")?>.*?<\/a>\:? ?/g,"").replace(/\s:\)+/g," <span class='emo smile' id='emo1' title=' :)'></span>").replace(/\s:\(/g," <span class='emo sad' id='emo2' title=' :('></span>").replace(/\s;\)/g," <span class='emo ok' id='emo3' title=' ;)'></span>").replace(/\s:p/gi," <span class='emo melet' id='emo4' title=' :p'></span>").replace(/\s:3/g," <span class='emo wkwk' id='emo5' title=' :3'></span>").replace(/\s:v/g," <span class='emo pacman' id='emo6' title=' :v'></span>").replace(/\s:D/g," <span class='emo mrangas' id='emo7' title=' :D'></span>").replace(/\so.O/g," <span class='emo ori' id='emo8' title=' o.O'></span>").replace(/\sO.o/g," <span class='emo oka' id='emo9' title=' O.o'></span>").replace(/\s:o/g," <span class='emo oo' id='emo10' title=' :o'></span>").replace(/\s:\//gi," <span class='emo uu' id='emo11' title=' :/'></span>").replace(/\s:'\(/g," <span class='emo nangis' id='emo12' title=' :&#39;('></span>").replace(/\s\^(\_|)\^/g," <span class='emo imut' id='emo13' title=' ^_^'></span>").replace(/\s\-(\_|)\-/g," <span class='emo lha' id='emo14' title=' -_-'></span>").replace(/\s&gt;:o/gi," <span class='emo sepet' id='emo15' title=' &gt;:o'></span>").replace(/\s&lt;3/gi," <span class='emo hati' id='emo16' title=' &lt;3'></span>").replace(/\s:\*/g," <span class='emo kiss' id='emo17' title=' :*'></span>").replace(/\sO:\)/g," <span class='emo apa' id='emo18' title=' O:)'></span>").replace(/\s3:\)/g," <span class='emo jahat' id='emo19' title=' 3:)'></span>").replace(/\s8:\)/g," <span class='emo kocoi' id='emo20' title=' 8:)'></span>").replace(/\s8-\)/g," <span class='emo koco' id='emo21' title=' 8-)'></span>").replace(/\[note\](.*?)\[\/note\]/gi,"<div class='note'>$1</div>").replace(/\[(youtube|iframe)\](.*?)\[\/(youtube|iframe)\]/gi,"<div class='loader'><iframe class='video' src='$2' frameborder='0'></iframe></div>").replace(/<em rel="note">(.*?)<\/em>/gi,"<div class='note'>$1</div>").replace(/<b rel="quote">(.*?)<\/b>/gi,"<blockquote>$1</blockquote>").replace(/<i rel="pre">(.*?)<\/i>/gi,"<pre><code>$1</code></pre>").replace(/<i rel="code">(.*?)<\/i>/gi,"<code>$1</code>").replace(/<b rel="h([0-6])">(.*?)<\/b>/gi,"<h$1>$2</h$1>").replace(/<i rel="anchor">(.*?)<\/i>/gi,"<a class='allow' href='$1' rel='nofollow'>$1</a>").replace(/\[(link|url)\](.*?)\[\/(link|url)\]/gi,"<a class='allow' href='$2' rel='nofollow'>$2</a>").replace(/\[url\=('|")?(.*?)('|")?\](.*?)\[\/url\]/gi,"<a class='allow' href='$2' rel='nofollow'>$4</a>").replace(/(<i rel="image">|\[img\])(.*?)(<\/i>|\[\/img\])/gi,"<img class='center besar' src='$2' alt='Loading...'>").replace(/<\/h([0-6])>(<br ?\/?>)+/g,"</h$1>");e.innerHTML=s},e.replyTo=function(e){var s=a.getElementById("comment-editor"),l=a.getElementById("comment-form"),r=a.getElementById("cancel"!=e?"c"+e:"comments"),t=k;s.className+=" transparent",s.parentNode.className+=" loader",s.src="cancel"!=e?t[0]+"&parentID="+e+"#"+t[1]:t[0]+"#"+t[1],r.insertBefore(l,null),s.onload=function(){this.className=this.className.replace(/ transparent/g,""),this.parentNode.className=this.parentNode.className.replace(/ loader/g,"")}};var E=s();if(-1==E||E>=9){for(;-1!=t.indexOf('id="a');)g=t.indexOf('id="a'),t=t.substring(g+4),g=t.indexOf('"'),n[c]=t.substring(0,g),t=t.substring(g),o[c]=a.getElementById(n[c]).innerHTML,i[c]=0,c++;for(g=0;c-1>g;g++)for(f=g+1;c>f;f++)if(-1!=o[f].indexOf(n[g])){for(p=n[f],m=o[f],i[f]=i[g]+1,d=i[f],b=g+1;f>b&&!(i[b]<d);b++);for(u=f;u>b;u-=1)n[u]=n[u-1],o[u]=o[u-1],i[u]=i[u-1];n[b]=p,o[b]=m,i[b]=d}for(g=0;c>g;g++)f=o[g].indexOf('@<a href="#a'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f+1),f=$.indexOf("</a>"),$=$.substring(f+4),o[g]=h+$),f=o[g].indexOf('class="cm_wrap'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f),i[g]>6&&(i[g]=6),o[g]=h+'style="margin-left:'+(0+5*i[g])+'%" '+$),v+=o[g];replaced(r,v),replaced(x,x.innerHTML),r.style.display="block"}else replaced(r,"<h4><em>Old IE Suck!</em></h4>");for(var p=0;p<x.children.length;p++){var N=x.children[p];N.addEventListener("click",l,!1)}var O=[".texte"];e.addEventListener("mouseup",function(e){for(var s=0;s<O.length;s++){var l=a.querySelector(O[s]);e.target!=l&&e.target.parentNode!=l&&l.parentNode.removeChild(l)}})}(window,document);
  //]]>
</script>
      </b:if>
</b:includable>

Terakhir, tinggal mengaktifkan thread comment ini, yaitu dengan cara mencari semua kode yang nampak seperti ini:

<b:include data='post' name='threaded_comments'/>

Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:

<b:include data='post' name='comments'/>

Klik Simpan dan selesai !