Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli

Mengaktifkan Modifikasi Fitur Komentar Bersarang pada Blogger

Pertama-tama buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

.clearfix {*zoom:1}

.pull-left {
  display:block;
  float:left;
}

.pull-right {
  display:block;
  float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
  margin:3em 0 0;
  font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
  letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
  color:#2143B4;
  text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
  margin:0 0 1em;
  padding:0 0 .7em 0;
  border-bottom:1px solid #eee;
  position:relative;
}

/* comment header */
.custom-comments .comment-header {
  overflow:hidden;
  margin:0 0 1em 0;
}

/* avatar area */
.custom-comments .avatar-box {
  width:65px;
  margin:0 0 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
  border:none;
  padding:0 0;
  margin:0 0;
  float:none;
  display:block;
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
}

.custom-comments .avatar-image-container img {
  border:1px solid #ddd;
  padding:4px;
  background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin:0 0 2em 75px}

/* comment reply */
.custom-comments .comment-reply {
  margin:1em 0 0 75px;
  padding:1em 1.2em;
  background-color:#FFF7D1;
  position:relative;
  font-size:11px;
}

.custom-comments .comment-reply:after {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:0;
  left:0;
  border:10px solid transparent;
  border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
  border-color:#EAE5C4;
  background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
  display:block;
  clear:both;
  margin:1em 0 .5em 75px;
  text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
  border:1px solid #ddd;
  outline:none;
  padding:2px .7em 3px .5em;
  margin:0 0 0 4px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
  border-color:#bbb;
  text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
  margin:1em 0 2em;
  clear:both;
}

.custom-comments .comment-item .custom-comment-form {
  border:1px solid #eee;
  padding:1em .2em 2em 1.5em;
  margin-left:75px;
}

.custom-comments #comment-editor {
  max-width:none;
  width:100%;
  height:250px;
  border:none;
  background:none;
}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
  font-style:italic;
  color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
  font-size:100%;
  display:block;
  float:none;
  width:auto;
  clear:both;
  border:1px solid #eee;
  padding:.5em 1em;
  overflow:hidden;
}

/* Author Comments Style: Do whatever you want with this! */
.author-comment .comment-item {}
.author-comment .comment-header {}
.author-comment .avatar-box {}
.author-comment .comment-body {}

Kemudian cari kode ini:
<b:includable id='comments' var='post'>
Salin kode ini, dan letakkan di atasnya:

<b:includable id='custom-comments' var='post'>
  <section class='custom-comments' id='custom-comments'>
    <b:if cond='data:post.allowComments'>

    <h4>
      <b:if cond='data:post.numComments == 1'>
        <span>1</span>&amp;nbsp;<data:commentLabel/>
      <b:else/>
        <span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/>
      </b:if>
    </h4>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
        <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>
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
      </nav>
    </b:if>

    <div id='comments-area'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.inReplyTo'><b:else/>
          <b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
          <div class='comment-item clearfix' expr:id='data:comment.anchorName'>
            <div class='comment-header clearfix'>
              <strong class='user pull-left'>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if> <data:commentPostedByMsg/>
              </strong>
              <a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
            </div> <!-- comment-header -->
            <div class='avatar-box pull-left'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
            </div> <!-- avatar-box -->
            <div class='comment-body'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <data:comment.body/>
              </b:if>
            </div> <!-- comment-body -->
            <b:loop values='data:post.comments' var='replies'>
              <b:if cond='data:replies.inReplyTo == data:comment.id'>
                <b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
                <div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
                  <div class='comment-header clearfix'>
                    <strong class='user pull-left'>
                    <b:if cond='data:replies.authorUrl'>
                      <a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a>
                    <b:else/>
                      <data:replies.author/>
                    </b:if> <data:commentPostedByMsg/>
                    </strong>
                    <a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
                  </div> <!-- reply comment-header -->
                  <div class='avatar-box pull-left'>
                    <b:if cond='data:replies.favicon'>
                      <img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                    </b:if>
                    <b:if cond='data:blog.enabledCommentProfileImages'>
                      <data:replies.authorAvatarImage/>
                    </b:if>
                  </div> <!-- reply avatar-box -->
                  <div class='comment-body'>
                    <b:if cond='data:replies.isDeleted'>
                      <span class='deleted-comment'><data:replies.body/></span>
                    <b:else/>
                      <data:replies.body/>
                    </b:if>
                  </div> <!-- reply comment-body -->
                  <span class='comment-bottom-line'>
                    &lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
                  </span>
                </div> <!-- reply comment-reply -->
                <b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
              </b:if> <!-- replies.inReplyTo -->
            </b:loop>
            <span class='comment-bottom-line'>
              <b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Reply&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
            </span>
            <div expr:id='&quot;form-container-&quot; + data:comment.id'/>
          </div> <!-- comment-item -->
          <b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
        </b:if> <!-- comment.inReplyTo -->
      </b:loop>
    </div>

    <b:if cond='data:post.commentPagingRequired'>
      <nav class='paging-control-container'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
        <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>
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
      </nav>
    </b:if>

    <div class='custom-comment-form' id='custom-comment-form'>
      <h4><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <div class='custom-comment-editor-wrapper'>
        <iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
      </div>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
      <a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</a>
    </div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
    var frame = document.getElementById('comment-editor'),
        form = document.getElementById('custom-comment-form'),
        container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
        part = originalSource;
    frame.style.height = "50px";
    frame.style.visibility = "hidden";
    frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
    container.insertBefore(form, null);
    frame.onload = function() {
        this.style.height = "250px";
        this.style.visibility = "visible";
    };
}
//]]>
</script>

    </b:if>
  </section>
</b:includable>

Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua kode yang tampak seperti ini:
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:

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

Klik Simpan Template.

Konfigurasi

Kode-kode yang Saya beri tanda adalah label-label tombol dan bisa Anda ganti teksnya sesuka hati, sesuai dengan bahasa pada negara dimana Anda tinggal (Beberapa teksnya ada yang terletak jauh di sebelah kanan, mohon gulung kontainer kodenya ke kanan sekali-kali).
Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .author-comment untuk menandai komentar penulis. Sebagai contoh, Saya akan memberikan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan adalah seperti ini:

.custom-comments .author-comment .comment-item {
  border:5px solid #900;
  background-color:#ff0;
}