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

Tabel Konten
  1. Mengaktifkan Fitur Komentar Bersarang pada Blogger 
    1. Konfigurasi 

Pembaharuan 2018/05/17: Sintaks dan struktur HTML sudah berubah. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel.

Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli
Mengaktifkan fitur threaded commenting non-standar pada Blogger.

Setelah berhasil menemukan beberapa metode untuk menciptakan komentar bersarang (atau berbalas??) pada Blogger, Saya rasa metode dari bX-NicoNico adalah yang paling bagus. Mengapa?

  1. Dia tidak menggunakan elemen <data:post.commentJso/> sebagai salah satu elemen yang dibutuhkan untuk sistem ini, sehingga markup HTML akan menjadi lebih pendek dari markup HTML pada template dengan fitur komentar bersarang yang masih standar. (Fitur komentar bersarang yang masih standar akan menampilkan JSON komentar sebelum daftar komentar, sehingga jumlah karakter markup HTML pada fitur komentar bersarang yang masih standar akan menjadi dua kali lipat lebih panjang dibandingkan markup komentar biasa.
  2. Layout komentar tertata secara otomatis. JavaScript hanya digunakan untuk mengubah URL pada iframe formulir komentar dan juga untuk memindahkan posisinya sesuai dengan ID komentar induk masing-masing.
  3. Karena layout komentar ditata secara otomatis oleh Blogger, maka saat JavaScript dimatikan, tata letak komentar balasan akan tetap berada pada posisi yang benar. Ini berbeda dengan beberapa hack komentar bersarang Blogger yang hanya menggunakan JavaScript (yang juga telah Saya pakai sampai sekarang) untuk memposisikan komentar-komentar balasan, sehingga saat JavaScript dimatikan, layout komentar akan berantakan.

Berikut ini adalah fitur komentar versi Saya yang lebih pendek dan lebih mudah dalam hal instalasi yang Saya buat berdasarkan konsep dari Felipe, yaitu dengan cara menggunakan elemen data baru bernama <data:comment.inReplyTo/> untuk menyaring anak-anak komentar yang tampil. Elemen ini berfungsi untuk menampilkan ID komentar induk pada masing-masing komentar balasan. Saya bisa mengatakan bahwa metode ini adalah metode yang paling tepat dan bukan merupakan “hack”, karena kita menerapkan elemen yang ada dari Blogger untuk dimanfaatkan sesuai dengan tugasnya:

Lihat Demo


Mengaktifkan 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:

/* Begin custom comments */

.comments,
.comment {
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 0;
}
.comments::after,
.comment::after,
.comment-header::after,
.comment-body::after,
.comment-footer::after {
  content: "";
  display: table;
  clear: both;
}
.custom-comments {
  margin: 3em 0 0;
  font: normal normal 13px/1.4 Tahoma, Helmet, FreeSans, sans-serif;
}
.custom-comments a {
  color: #2143b4;
  text-decoration: none;
}
.custom-comments a:hover {
  text-decoration: underline;
}
.custom-comments .comment {
  margin: 0 0 .5em;
  padding: 0 0 .75em 0;
  border-bottom: 1px solid #eee;
  position: relative;
}
.custom-comments .comment-header {
  margin: 0 0 1em 0;
}
.custom-comments .comment-author {
  float: left;
}
.custom-comments .comment-url {
  float: right;
}
.custom-comments .comment-avatar {
  width: 65px;
  float: left;
}
.custom-comments .comment-avatar a,
.custom-comments .comment-avatar img {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  display: block;
  float: none;
  width: 50px;
  height: 50px;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}
.custom-comments .comment-avatar img {
  border: 1px solid #ddd;
  padding: 4px;
  background: #fafafa;
}
.custom-comments .comment-body {
  margin: -5px 0 1em 75px;
}
.custom-comments .comment.reply {
  margin: 0 0 1em 75px;
  padding: 1em 1.2em;
  background: #fff7d1;
  border: 0;
  position: relative;
  font-size: 86%;
}
.custom-comments .comment.reply::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border: 10px solid transparent;
  border-color: #fff #f5f2d8 #f5f2d8 #fff;
}
.custom-comments .comment.reply .comment-author {
  margin-left: 15px;
}
.custom-comments .comment.reply a {
  color: #767643;
}
.custom-comments .comment.reply .comment-avatar img {
  border-color: #eae5c4;
  background: #f5f0d3;
}
.custom-comments .comment-footer {
  margin: 0 0 .125em 75px;
  text-align: right;
}
.custom-comments .comment-footer a,
.custom-comments .a-undo {
  display: inline-block;
  border: 1px solid #ddd;
  padding: .15em .65em .2em;
  margin: 0 0 0 .25em;
  border-radius: 1em;
  text-decoration: none;
  outline: none;
}
.custom-comments .comment.reply .comment-footer a {
  border-color: #eae5c4;
}
.custom-comments .comment-footer .a-reply::before {
  content: '\2714';
  color: #3db537;
  display: inherit;
  margin: 0 .25em 0 -.125em;
}
.custom-comments .comment-footer .a-delete::before {
  content: '\2718';
  color: #b42a21;
  display: inherit;
  margin: 0 .25em 0 -.125em;
}
.custom-comments .comment-footer a:hover,
.custom-comments .a-undo:hover {
  border-color: #ccc;
  text-decoration: none;
}
.custom-comments .comment-footer a:focus,
.custom-comments .comment-footer a:active,
.custom-comments .a-undo:focus,
.custom-comments .a-undo:active {
  border-color: #aaa;
}
.custom-comments .comment.reply .comment-footer a {
  background: #fffad6;
  border-color: #e3deb7;
}
.custom-comments .comment.reply .comment-footer a:hover {
  border-color: #d6d1aa;
}
.custom-comments .comment.reply .comment-footer a:focus,
.custom-comments .comment.reply .comment-footer a:active {
  border-color: #bcb795;
}
.custom-comments .custom-comment-form {
  margin: 1em 0 2em;
  clear: both;
}
.custom-comments .comment .custom-comment-form {
  border: 1px solid #eee;
  padding: 1em;
  margin-left: 75px;
}
.custom-comments #comment-editor {
  max-width: none;
  width: 100%;
  height: 250px;
  background: none;
  border: 0;
}
.custom-comments .custom-comment-form .a-undo {
  display: none;
}
.custom-comments .comment .custom-comment-form .a-undo {
  display: inline-block;
}
.custom-comments .comment .custom-comment-form h4 {
  display: none;
}
.custom-comments .custom-comment-editor-wrapper {
  background: transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%;
}
.custom-comments-pager {
  font-size: 80%;
  text-align: center;
  width: auto;
  height: auto;
  line-height: normal;
  margin: 1em 0;
  float: none;
  display: block;
  clear: both;
  border: 1px solid #eee;
  padding: .5em 1em;
  overflow: hidden;
}
.custom-comments-pager .unneeded-paging-control {
  display: none;
}
.custom-comments-pager .paging-control {
  display: inline;
}

/* Author comment style */
.custom-comments .comment.is-author {}
.custom-comments .comment.is-author > .comment-header {}

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

/* End custom comments */

Kemudian cari kode ini:

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

Salin kode ini, dan letakkan di atasnya:

<b:includable id='custom-comments' var='post'>
  <b:with value='{
      delete: &quot;Delete&quot;,
      reply: &quot;Reply&quot;,
      undo: &quot;Cancel Reply&quot;
  }' var='text'>
    <section class='custom-comments' id='custom-comments'>
      <b:if cond='data:post.allowComments'>
        <h4>
          <b:if cond='data:post.numComments == 1'>
            <span>1</span> <data:commentLabel/>
          <b:else/>
            <span><data:post.numComments/></span> <data:commentLabelPlural/>
          </b:if>
        </h4>
        <b:if cond='data:post.comments.size &gt; 0'>
          <ul class='comments'>
            <b:loop values='data:post.comments' var='comment'>
              <b:if cond='!data:comment.inReplyTo'>
                <b:include data='comment' name='custom-comments-comment'/>
              </b:if>
            </b:loop>
          </ul>
        </b:if>
        <b:include data='post' name='custom-comments-pager'/>
        <b:include data='post' name='custom-comments-form'/>
      </b:if>
    </section>
  </b:with>
</b:includable>
<b:includable id='custom-comments-comment' var='comment'>
  <li class='comment' expr:id='data:comment.anchorName'>
    <b:class cond='data:comment.authorClass' name='is-author'/>
    <b:class cond='data:comment.isDeleted' name='is-deleted'/>
    <header class='comment-header'>
      <strong class='comment-author'>
        <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> <data:commentPostedByMsg/>
      </strong>
      <a class='comment-url' expr:href='data:comment.url'><data:comment.timestamp/></a>
    </header>
    <figure class='comment-avatar'>
      <img alt='' expr:src='resizeImage(data:comment.authorAvatarSrc, 50)'/>
    </figure>
    <div class='comment-body'>
      <data:comment.body/>
    </div>
    <b:with value='data:post.comments filter (i =&gt; i.inReplyTo == data:comment.id)' var='replies'>
      <b:if cond='data:replies.size &gt; 0'>
        <ul class='comments replies'>
          <b:loop values='data:replies' var='reply'>
            <b:include data='reply' name='custom-comments-comment-reply'/>
          </b:loop>
        </ul>
      </b:if>
    </b:with>
    <footer class='comment-footer'>
      <b:if cond='!data:comment.isDeleted'>
        <a class='a-reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'><data:text.reply/></a>
      </b:if>
      <a class='a-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><data:text.delete/></a>
    </footer>
  </li>
</b:includable>
<b:includable id='custom-comments-comment-reply' var='reply'>
  <li class='comment reply' expr:id='data:reply.anchorName'>
    <b:class cond='data:reply.authorClass' name='is-author'/>
    <b:class cond='data:reply.isDeleted' name='is-deleted'/>
    <header class='comment-header'>
      <strong class='comment-author'>
        <b:if cond='data:reply.authorUrl'>
          <a expr:href='data:reply.authorUrl' rel='nofollow' target='_blank'><data:reply.author/></a>
        <b:else/>
          <data:reply.author/>
        </b:if> <data:commentPostedByMsg/>
      </strong>
      <a class='comment-url' expr:href='data:reply.url'><data:reply.timestamp/></a>
    </header>
    <figure class='comment-avatar'>
      <img alt='' expr:src='resizeImage(data:reply.authorAvatarSrc, 50)'/>
    </figure>
    <div class='comment-body'>
      <data:reply.body/>
    </div>
    <footer class='comment-footer'>
      <a class='a-delete' expr:href='data:reply.deleteUrl' expr:title='data:top.deleteCommentMsg'><data:text.delete/></a>
    </footer>
  </li>
</b:includable>
<b:includable id='custom-comments-form' var='post'>
  <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>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
    <a class='a-undo' href='javascript:replyTo(0);'><data:text.undo/></a>
  </div>

  <script>
    //<![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 ? document.getElementById('c' + id) : document.getElementById('custom-comments'),
          part = originalSource;
      frame.style.height = "50px";
      frame.style.visibility = "hidden";
      frame.src = id ? 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:includable>
<b:includable id='custom-comments-pager' var='post'>
  <b:if cond='data:post.commentPagingRequired'>
    <nav class='custom-comments-pager'>
      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
      <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>&#160;
      <data:post.commentRangeText/>&#160;
      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>&#160;
      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    </nav>
  </b:if>
</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. Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .is-author 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:

.comment.is-author {
  border: 5px solid #900;
  background-color: #ff0;
}
.comment.is-author > .comment-body {
  font-size: 200%;
}

Catatan: Bagi Anda yang selama ini telah lama menggunakan fitur komentar bersarang lebih dari dua level (seperti blog Saya), sangat disarankan untuk tidak menerapkan modifikasi di atas, karena Saya hanya menggunakan loop komentar balasan sebanyak satu kali:

<b:loop values='data:post.comments' var='reply'>
  <b:if cond='data:reply.inReplyTo == data:comment.id'>
    Komentar balasan muncul di sini…
  </b:if>
</b:loop>

Seperti yang Anda lihat bahwa Saya hanya membandingkan nilai data:var.inReplyTo pada komentar balasan dengan ID komentar induk sekali saja (satu kali loop), sehingga jika komentar balasan lama Anda berada di level ke tiga dan seterusnya, komentar-komentar tersebut tidak akan tampil dalam posting Anda dikarenakan ID komentar induknya tidak sempat lolos penyaringan terhadap data:var.inReplyTo pada anak komentar di level tersebut.

Blog yang masih baru atau blog lama dengan sedikit komentar dan blog dengan fitur komentar yang masih lama bisa melakukan modifikasi ini dengan aman.

146 Komentar

  • IRIL SAGITA

    Akhirnya di post juga, makasih ya kak, aku udah nungguin lama banget ni posting !

  • Dixy

    Mau nanya nih Mas Taufik, saya kan bukan admin ataupun pemilik dari komentar yang ada dalam blog demo tersebut.
    Tapi kok ada tombol hapusnya ya...?
    Sepertinya blog Mas Taufik yang ini juga seperti itu.
    Kenapa ya...? :)

    • kamu info

      .item-control {
      display: none;
      }
      setahu gw kaya bgitu kalo ngilangin tombol hapus wkwkkw

    • Beben Koben

      memang gitu keadaannya kaleee! gakda yg aneh duong :P
      aya-aya wae?
      kalo di ilangin, entar kasian dong jika salah komentar, komentator mau hapus kagak bisa?

    • Unknown

      walaupun ada, gak bakalan ngaruh kalo di pencet kalo bukan si pemilik komentar (di luar si admin blog nya yaa) yang hapus sendiri...

      Tapi kalo di form thread komentar blogger yang lama, kalo mau menghilangkan tombol itu, widget navbar nya di non aktifkan saja.. kalo form komentar ini, belum nyobaaa.... ^:D

    • Dixy

      nah kan jadi kaya gmaanaa gtu...

      • Taufik Nurrohman

        Lebih bagus kalau ada tombol hapusnya. Lebih bagus lagi kalau ada tombol editnya, jadi penulis komentar bisa mengedit komentarnya. Misalnya karena salah ketik (setidaknya sebelum ada komentator lain yang membalas komentarnya).

        Kalau mau menghilangkan tombol hapus di fitur ini, cukup tambahkan CSS ini di atas ]]></b:skin>

        .delete-btn {display:none}
  • Beben Koben

    alami saja aaahhh, dah pusing ngotak-ngatik kode :D

  • kamu info

    wah mantap nih mas Threaded Commentsnya \o/

  • Anonim

    mas ,
    aku ingin bertanya ,
    cara nambahin kata mengatakan itu gimana mas,,.
    tampat harus menerapkan komentar ini..?

    Sekian mas ,
    semoga terbalas , :)

  • Taufik Nurrohman

    .comments .comment-header cite.user:after {
    content:" mengatakan...";
    }
  • kamu info

    o iya mas klo misalnya nambahin emotion codenya gmana pada threaded comment yang mas posting ini ? mohon dijawab :)

  • Unknown

    Jadi ada pilihan untuk merubah Threaded Comments bawaan dari blogger..
    mas mau nanya nih..
    bisa tidak resolusi gambar avatarx diatur??
    seperti diblog http://blog.duypham.info/

    • Taufik Nurrohman

      Saya pakai ini:

      $('.avatar-image-container img').each(function() {
      var src = ($(this).attr('longdesc')) ? $(this).attr('longdesc').replace(/\/s[0-9]+(\-c|\/)/ig,"/s50$1") : $(this).attr('src').replace(/\/s[0-9]+(\-c|\/)/ig,"/s50$1");
      $(this).attr('src',src);
      });

      Tapi percuma sih sebenarnya, peramban modern biasanya akan tetap mengunduh gambar resolusi aslinya (gambar sebelumnya) meskipun setelah itu URL-nya diganti dengan yang baru (jadi harus memuat gambar dua kali).

      • Unknown

        oh jadi sulit yah mas..

        kira2 komentar di blog http://blog.duypham.info/ menggunakan JS seperti di atas untuk merubah url gambarnya ngak mas..
        atau menggunakan cara lain untuk memanggil gambarnya
        misalnya API blogger..
        ???

        • Taufik Nurrohman

          Dia cuma memakai cara seperti ini:

          var cL = document.getElementById('comments-area'),
          c = cL.getElementsByTagName('span');
          if (c) {
          for (z = 0; z < c.length; z++) {
          f = c.item(z).innerHTML;
          if (f.indexOf('style="') != -1) {
          f = f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/, '');
          f = f.replace(/display: none/i, '');
          f = f.replace(/longdesc=/i, 'src=');
          f = f.replace(/\/s[0-9]+\//, '/s50/');
          c.item(z).innerHTML = f;
          }
          }
          }
          • Unknown

            jadi tambah pusing..
            lihat JSnya..

            oh ia mas sepertinya masih ada sedikit error di thread comments yang mas buat..
            dibagian pembungkus authornya..
            saya lihat susunan html balasan/reply nya..
            jika author yang komentar pertama maka dibagian balasan akan terbungkus juga dengan div dengan class author-comment..
            klo di halaman demo dibagian komentar kang kapuk dan Ahmad Nurfadilah.. di bungkus class author-comment..

            • Taufik Nurrohman

              Sudah diperbaiki. Salin ulang kode XML di atas untuk menggantikan kode yang lama. Trims atas masukannya.
              Untuk mengetes komentar administrator bisa memakai kode CSS ini:

              .author-comment > .comment-item,
              .author-comment > .comment-reply {outline:2px dashed red}

              Nantinya komentar penulis akan dikelilingi outline berwarna merah.

              • Unknown

                Wah saran diterima..
                nanti mau coba implementasikan di blog lain...
                karena sudah terlanjur pake yang bawaan blogger dan sudah modif dgn CSS jadi klo mau beralih ke yang satu ini sulit karena perlu rubah lagi CSS agar sesuai template blog..

                Kelebihan dari thread comment ini menurut saya dapat membantu dalam mengurangi kesalahan error jika di test dengan valid html, karena elemen htmlnya terbuka tidak seperti bawaan blogger yang terdapat banyak tag yang tidak valid seperti name, kind, t, c..

  • azewdsignet

    Mas taufik numpang tanya`mau cari tutorial merubah komentar kaya mas taufik sbelah mana ya ?

  • Unknown

    mas tofik kalo mau bikin fungsi yang emotikon di klik terus keluar kodenya ada tutorialnya gak

    misal saya klik ":)" yang keluar emotikon :)
    ada tutorianya gak mas

  • Ave Ry

    makasih mas,,, bookmarked nih,, saya mau tanya kalo ngaktifin threaded comments tapi pengen yang nggk pop out, gimana ya? soalnya saya nemu yang biasa, yang standar, tp jadina pas klik reply kotak komentarnya mucul pop out,, pengennya muncul di bawah ada

  • Unknown

    apa bisa bagian replynya dibungkus dengan tag div??
    klo bisa kira2 bagaimana tag kondisional yang dipakai??

    • Taufik Nurrohman

      Tergantung. Tombolnya atau formulirnya.

      • Unknown

        maksud saya semua bagian komentar balasan dibungkus lagi tag div..
        kurang lebih seperti ini htmlnya:
        <div class="item komentar">
        ......
        <div class="area-balasan">
        <div class="item balas">
        .....
        </div>
        <div class="item balas">
        .....
        </div>
        <div class="item balas">
        .....
        </div>
        </div>
        </div>

        <div class="item komentar">
        ......
        </div>

        <div class="item komentar">
        ......
        <div class="area-balasan">
        <div class="item balas">
        .....
        </div>
        </div>
        </div>

        kira-kira bentuk tag kondisionalnya agar tag div dgn class area-balasan hanya muncul ketika terdapat balasan bagaimana yah mas..
        karena saya lihat di http://nicondroid.blogspot.com/p/custom-threaded-comments-in-blogger.html
        dia bisa menerapkannya..

        • Taufik Nurrohman

          Kira-kira seperti ini:

          Sebelum:

                      <b:loop values='data:post.comments' var='replies'>
          <b:if cond='data:replies.inReplyTo == data:comment.id'>
          ...
          ...
          ...
          </b:if> <!-- replies.inReplyTo -->
          </b:loop>

          Sesudah:

                      <div class='area-balasan'>
          <b:loop values='data:post.comments' var='replies'>
          <b:if cond='data:replies.inReplyTo == data:comment.id'>
          ...
          ...
          ...
          </b:if> <!-- replies.inReplyTo -->
          </b:loop>
          </div> <!-- .area-balasan -->

          Tapi area balasan nantinya tetap muncul meskipun isinya kosong seperti ini:

          <div class='comment-item'>
          ...
          ...
          ...
          <div class='area-balasan'></div>
          </div>

          Kalau kita tambahkan padding pada area balasan misalnya, walaupun komentar balasannya tidak ada, area balasannya tetap tampak. Hasilnya jadi kurang bagus.

          • Unknown

            apa ada tag kondisionalnya agar area balasannya tidak muncul jika tidak ada komentar balasan??
            seperti tag div untuk komentar admin yang muncul jika ada admin berkomentar..
            <b:if cond='data:comment.author == data:post.author'>....</b:if>
            misalnya seperti:
            <b:if cond='data:comment.numCommentsReply != 0'>....</b:if>
            atau apalah??

            • Taufik Nurrohman

              Tidak ada. Yang mendapat data tambahan itu cuma anak komentar (dapat data berupa ID komentar induk).

              • Unknown

                jadi tidak ada yah mas..
                saya juga yang salah mas.
                saya kira metode dari bX-NicoNico dpt membuat yang seperti yang saya mau ternyata hanya seperti yang mas tulis hanya langsung membungkusnya dengan tag div..
                btw terima kasih atas jawabannya..
                sukses selalu mas taufik..

  • Unknown

    Alhamdulillah.....

    ketemu juga akhirnya komentar yang hampir persis seperti di blog kak taufik ini, yang terdiri dari beberapa level balasan dan fitur form balas di bawah komentar terkait.

    terima kasih banyak kak taufik atas ilmunya ?

  • azewdsignet

    mas taufik, saya sudah pasang (Threaded Comments) itu berhasil tapi imbasnya emoticon ya ga jadi icon malah code..!!

    • Taufik Nurrohman

      ID komentar ini sudah tidak standar. Coba beberapa selektor ini:

      1. #custom-comments
      2. #comments-area
      3. #custom-comment-form

  • Anonim

    mas taufik kok icon saya yang di tutorial yang ini " http://www.dte.web.id/2012/09/menandai-komentar-admin-pada-thread.html ". hilang ya, setalah pakai ini.... :'(

    • Taufik Nurrohman

      Beda markup, beda tampilan juga. Kalau mau membuat ikon sendiri, harus membuat markup baru yang kemudian harus dibungkus lagi dengan tag kondisional administrator, supaya ikon hanya muncul pada komentar administrator saja. Atau cukup pakai CSS pseudo elemen untuk membuat ikon palsu dari favicon blog, dengan memanfaatkan kelas administrator yang Saya tambahkan di atas. Seperti ini:

      .custom-comments .author-comment .comment-reply .user:after {display:none}
      .custom-comments .author-comment .user:after,
      .custom-comments .author-comment .author-comment .comment-reply .user:after {
      content:url("/favicon.ico");
      display:inline-block;
      width:16px;
      height:16px;
      vertical-align:top;
      margin:0 0 0 5px;
      }
      • Anonim

        itu kok display:none pantes gak muncul iconnya pas membalas komentar hehehe...

        • Anonim

          kalo pake lazy load kok avatarnya kadang muncul kadang nggak ya mas o.O

  • Unknown

    ini sudah saya terapkan di blog saya mas, tapi kayaknya ada sistem yang salah pada penandaan komentar admin / author, yaitu kalau user biasa mengomentari komentar author maka komentar dari user tersebut ikut ditandai sebagai komentar author, contohnya seperti di gambar ini mas:

    disitu saya menandai komentar admin dengan border-right berwarna biru di header comment nya, tetapi saat user lain mengomentarinya maka komentar tersebut ikut ditandai sebagai komentar admin

    solusinya gimana mas?
    makasih sebelumnya :)

    • Taufik Nurrohman

      Iya, karena markup komentar balasannya ada di dalam komentar induk, jadi kalau komentar induk itu adalah komentar admin, otomatis anak komentar di dalamnya juga akan diliputi oleh kelas .author-comment juga dari kelas admin komentar induk. Harus di-reset ulang tampilannya saat mulai masuk ke dalam, lalu set ulang tampilan komentar admin pada anak komentar:

      /* menambah border pada komentar admin */
      .custom-comments .author-comment .comment-header {border-right:4px solid red}
      /* membuang border pada semua anak komentar di dalam komentar admin */
      .custom-comments .author-comment .comment-reply .comment-header {border-right:none}
      /* set ulang border pada anak komentar yang ditulis oleh admin */
      .custom-comments .author-comment .author-comment .comment-reply .comment-header {border-right:4px solid blue}

      Atau bisa juga memakai selektor direct-children, tapi agak susah:

      .custom-comments .author-comment > .comment-item > .comment-header {border-right:4px solid red}
      .custom-comments .author-comment > .comment-item > .author-comment > .comment-reply > .comment-header {border-right:4px solid blue}

      Pakai kerangka yang pertama saja kalau masih bingung.
      Walaupun sebenarnya agak aneh juga. Memangnya untuk apa administrator mengomentari postingnya sendiri dan malah membuat komentar itu menjadi komentar induk?

      • Unknown

        terimakasih mas sudah dikasih pencerahan lagi,,

        saya biasanya mengomentari artikel saya sendiri kalau artikel itu isinya mengalami perubahan atau di update :D

        • Anonim

          senasib bos :D

          thx juga atas penjelasan nya bang :)

  • Unknown

    mantap mas taufik, blog saya sebelumnya susah banget diganti menjadi fitur komentar berbalas. Tapi sekarang berkat mas taufik blog saya sudah ada fitur komentar berbalasnya, \o/ :-bd

  • Unknown

    om kenapa pas udah di find script barusan nya gk ada di blog punya saya. kenapa ia,? terus gimana solusinya tuhh, mohon bantuanya ia om.
    begitu juga script yang ini

    pas di fint th gak ada :) sekali lagi mohon bantuanya ia om

    • Taufik Nurrohman

      Kurang jelas script yang mana. Mungkin maksudnya yang <b:include> itu ya?
      Belum pernah mengalami, tapi mungkin sudah berganti menjadi kode ini pada template-template yang baru:

      <b:include data='post' name='comment_picker'/>
  • IRIL SAGITA

    Kak taufik, pada blog aku sering terjadi gambar avatar komentar gagal di muat/tdak tampil,biasanya itu terjadi jika jumlah komentar sudah banya, adakah cara mengatasi hal tersebut kak ?

    • Taufik Nurrohman

      Seharusnya itu karena fitur lazy-loading foto profil bawaan dari Blogger. Kalau digulung sampai ke area komentar tertentu baru foto komentator tersebut akan termuat. Jadi tidak ada masalah. Yang penting script yang berada di area <head> ini jangan dibuang:

      <script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";
      (function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){
      var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart; ...
      ...
      ...
      ...
      ... b.addEventListener?b.addEventListener("scroll",k,!1):b.attachEvent("onscroll",k);
      })();</script>
      • IRIL SAGITA

        Jadi gitu ya kak, berarti gak ada masalah pada blog aku, karena script yang anda sebutkan tadi masih ada, aku kira kalau ada masalah pada template blog aku, makasih kak !

  • Unknown

    Terima kasih master atas tutorialnya.

    Oiya master, delete button nya bisa di lihat hanya oleh admin aja gak?. soalnya yang sekarang kan delete button nya bisa di lihat walaupun oleh bukan admin.
    Dan ane juga bingung mengenai pemasangan emoticons karena emoticons ane yg lama jadi tidak berfungsi lagi.
    Ane udh coba pasang emoticons yang ada di tutorial master yg ini : http://www.dte.web.id/2012/03/jquery-auto-emoticons-for-blogger.html juga gak bisa.

    Kalau master berkenan tolong cek ke blog ane di naruchigo.com

    Mohon petunjuk untuk newbie ini master.

    Terima kasih.

  • alul stemaku

    akhirnya yang saya cari" ketemu juga,. \o/ \o/ \o/
    makasih banyak mas atas tutorialnya.. :-bd

  • Yopi Hasopa

    Mas Taufik, sepertinya "Fitur Komentar Berbalas" ini ada bug pada saat komentar post sangat banyak (334 komentar). Komentar tidak muncul semuanya, malah ada kotak berwarna abu-abu tua. Mohon pencerahan nya Mas. Thanks :)

    Contoh postnya ini : http://percobaan.hsp21.com/2013/01/cara-mudah-nge-root-smartfren-andromax.html

    • Taufik Nurrohman

      Saya inspect memakai Firebug kelihatan kalau CSS default Blogger menyembunyikan tampilan navigasi yang tidak diperlukan dengan visibility:hidden, bukan display:none. Dengan menambahkan kode CSS ini, masalah bisa diatasi. Navigasi akan muncul kembali:

      .custom-comments .paging-control-container .unneeded-paging-control {display:none}
      .custom-comments .paging-control-container .paging-control {display:inline}

      Kode CSS di atas juga sudah Saya perbaharui ^:D

      • Yopi Hasopa

        :-bd Terima kasih Mas Taufik, masalah sudah teratasi dengan baik \o/

  • Unknown

    Makasih bro...saya izin nginep disini bro baca" artikelnya,,hahahay..

  • Unknown

    oohh iyha,,bro itu cara ngedit biar tombol hapusnya cuman bisa ddilihat adminnya gimana..??

    • Unknown

      gak usah dipasang kode deletenya, kan bisa hapusnya lewat dasbor, he...

  • Muhammad Zaki Al Aziz

    Kang. maaf nih mau sedikit bertanya. Kan saya sudah menerapkan kode ini di blog saya dan Alhamdulillah sudah bisa :)

    Tapi koq kenapa kalau saya ketik reply/balas, loadingnya lama?
    Apakah ada yang salah pada blog saya atau gimana kang?

    Makasih kang :)

    • Unknown

      Coba di cek di blog saya,,soalnya saya juga pake komentar yg diatas dan apakah sama lamanya pas loading..

    • Taufik Nurrohman

      Mungkin itu bukan masalah loading yang lama tapi memang benar-benar gagal loading. Coba di cek lagi kodenya atau ulangi lagi langkah-langkahnya. Mungkin ada yang salah.

  • MEGAPIXELS MULTIMEDIA

    Makasih gan tutornya, sangat sangat membantu~ Tralala ^_^

  • Putra

    lapor, saya coba pasang gak muncul sama sekali. Saya pasang di blog baru, belum ada komentar, bijimana ini? url -> satanic-murder . blogspot . com

  • Unknown

    saya masih menggunakan fitur thread komentar lama,, ketika komentar sudah sampai 200 lebih , yang lebihnya itu ga muncul... sudah pake loadmore tetep ajah ga bisa munucl..
    kira" kesalahan terletak dimana ya..???
    http://mdf-blog.blogspot.com/p/oot.html

  • Unknown

    Mas, kalo mau threaded comment yang nggak ada pop upnya gimana? punya saya ada pop upnya tuhh... putraarifprasetyo.blogspot.com

  • Safar

    mas, kok waktu mau balas komentar, nunggu lama bgt ya..keburu di pencet close mas.., ada apa ya?

  • Anonim

    udah dicoba dan sesuai langkah"nya, tapi knapa ya tetep ga muncul tulisan reply'nya..??

    • Taufik Nurrohman

      Kalau cuma tombol balasnya saja yang tidak tampil berarti kemungkinannya itu kesalahan Saya. Tapi kalau tombol balas komentarnya tidak tampil, dan efek CSS di atas juga tidak bekerja (sesuai CSS di atas, font komentar harus berubah menjadi Tahoma), maka itu artinya kamu yang gagal total.

  • Damar Zaky

    mas taufik, bisa bantu saya nggak?, cancel komang di blog saya gagal wkwkwk

    • Taufik Nurrohman

      Pakai Web Console.

      • Damar Zaky

        wah gimana itu, minta bantuan deh :D

        • Taufik Nurrohman

          TypeError: container is null
          ID area komentarmu sudah tidak sama dengan markup HTML di atas. Ubah kode JavaScript di bagian ini:

          container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments')

          menjadi seperti ini:

          container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('komengtar')
          • Damar Zaky

            thx

            • Damar Zaky

              aduh bener juga asem dah, thx wkwkwkwkwk padahal udah aku pake replacer pake notepad++, masih ngadat berarti np++nya xD, btw thx lagi

  • Anonim

    mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..

  • Ahmad Zaelani

    makasih bro.... mantap nih,,,, pertama gagal.. coba lagi terus berhasil... ok bagi yang nyoba jangan lupa templatenya di backup... heheh

  • Unknown

    Saya sudah berhasil menerapkan tutor diatas, tapi ada yang saya ingin tanyakan kepada Mas Taufik, yang saya kirim lewat email ^_^

  • you

    mas taufik komentar di blogsaya avatarnya mau author atau yang komment tetep aja tidak berubah sesuai dengan photo profil masing person. untuk mengatasinya kira kira gimana?

    • you

      contoh bisa diihat di http://www.pabk-4you.com/2012/11/modifikasi-daftar-isi-dengan-j-accordion.html

      • Taufik Nurrohman

        Itu thread comment dari Artisteer Tutorials. Mungkin agak berbeda dengan kode ini. Seharusnya tidak ada masalah kalau kode komentar disalin dari blog asalnya, karena awal-awal Saya juga memakai yang itu. Coba buka halaman ini

        • you

          terima kasih mas.. untuk masalah td saya coba ganti kode
          <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
          </b:if>

          menjadi seperti ini
          <div class='avatar-image-container vcard'><span dir='ltr'><a class='avatar-hovercard' expr:href='data:comment.authorUrl' onclick='' rel='nofollow'><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='35' width='35'/></a></span></div>

          ternyata berhasil.
          Satu lagi mas taufik.. pada halaman posting blog saya yang belum memiliki komentar, widget komentar tidak tampil. tetapi pada posting yang sudah dikomentari, widget komentar muncul.. kira2 apa masalahnya ya.

  • azewBz

    mas ko ga jln ya setelah saya pasang slide panel dengan menggunkan komentar berbalas ini..!!

    • Taufik Nurrohman

      Kamu sudah pernah tanya masalah ini, hanya saja kasusnya soal emotikon. Cari komentarmu di halaman ini yang ditulis pada hari Selasa, 29 Januari 2013 05.42.00 WIB. Selektor komentar ini sudah berubah menjadi #custom-comments, jadi…

      var panelSelector = '#custom-comments';

  • azewBz

    tidak ada perubahan`tetap tidak muncul setelah saya mengikuti langkah belasan kan taufik..!! :(

  • Unknown

    Wah mantap sekali tuts nya, maaf sedikit oot, tapi sepertinya masih dalam object, kalau untuk nonaktifkan link profile komentator kira kira bisa gk yah kang?

    Salam :)

    • Taufik Nurrohman

      Ganti kode ini:

      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

      dengan ini:

      <span><data:comment.author/></span>
  • Unknown

    Kang kalau mau memasang loop komentar balasan lebih dari dua tingkat dengan tidak memakai hack (maksudnya dengan cara seperti di posting ini) kira-kira ada ga?

    • Taufik Nurrohman

      Pernah coba tapi malah rusak. Sebenarnya caranya sudah benar cuma loop komentar anakannya terlalu banyak :(

  • Unknown

    kalo cara masukin untuk web yang baru diarancang dengan dream weaver, gmna caranya mas, bisa gak?? mhon bantuannya (cara pasangnya).tx

  • habibi daeng

    Alhamdulillah, ijin pakai juga ya mas taufik :)

    • habibi daeng

      tapi kok hasilnya error ya mas?

      malah tampilan seluruh blog saya yang masuk ke jendela komentar, beh jadi bingung.

      • Taufik Nurrohman

        Kalau begitu tombol balas gagal menyisipkan URL formulir balasan. Iframe berhasil berpindah, tapi tidak berhasil disisipi URL baru (URL yang masuk kosong/sama dengan halaman yang sedang aktif saat itu).

        • habibi daeng

          ada saran ga mas ya untuk saya? :D

  • you

    apakah custom comment ini bisa ditambahkan syntax.. soalnya saya pake ini.. v syntaxnya ga jalan... bisa kasih pencerahannya mas?

  • Alpha Dian Tamalanrea

    mau tanya mas, kira2 bisa ngga latar belakangnya dikasih background? biar ngga transparan gitu komentarnya

    • Taufik Nurrohman

      Lah itu kamu bisa bikin screenshoot yang ada gambar latarnya pakai apa? Begini:

      .custom-comments {
      background:#803535 url('pattern-JKT48.png') repeat 0 0;
      color:white;
      }
  • Alpha Dian Tamalanrea

    itu dari background templatenya :D
    oke makasi mas taufik \o/

    oiya mas, ijin copy link emoticonnya ya buat di postingan2 blog saya 0:)

  • Farrij Annafi'u

    Mas itu kenapa komentar selain admin kagak ada fotonya????

    • Taufik Nurrohman

      Coba tambahkan fungsi ini sebelum kode //]]>

      (function() {
      if (!document.getElementsByClassName) return;
      var imgs = document.getElementsByClassName('avatar-image-container'), img, src;
      for (var i = 0, len = imgs.length; i < len; ++i) {
      img = imgs[i].getElementsByTagName('img')[0];
      src = img.getAttribute('longdesc') ? img.getAttribute('longdesc') : "http://img2.blogblog.com/img/b16-rounded.gif";
      img.src = src.replace(/\/s[0-9]+(\-c)?/, "/s50-c");
      img.style.display = "block";
      img.removeAttribute('longdesc');
      }
      })();
  • GEOKGEOK

    Makasih bangat sob... sangat membantu :-bd

  • Anonim

    apakah tingkatannya bisa dimbah mas?

  • you

    Saya memakai fitur komentar ini.
    tetapi hampir semua crawl error pada blog saya memiliki url seperti ini http://....../2013/11/&parentID=4287954423382525820
    apakah ada cara untuk mengatasinya mas? biar tidak terindex mbah google.. mhon bantuannya

    • Taufik Nurrohman

      Tambahkan atribut rel="nofollow" pada tautan ini:

      <a class='comment-permalink pull-right'>
      <a class='delete-btn'>
  • Amazing Sphere

    sob, kalo merubah posisi tulisan balas ama hapusnya jd seperti kyk blogmu ini gimana?

    • Taufik Nurrohman

      Saya tidak punya tutorialnya, tapi kalau mau cari itu ada yang bisa memakai komentar bawaan Blogger yang dibuat seperti ini. Biasanya sudah dalam bentuk templat.

Komentar telah ditutup.