May 27, 2014

Cara Menampilkan Balas Komentar (Comment Reply) di Blog

May 27, 2014

Tips Blogging ini berisi cara menampilkan balas komentar, memunculkan Reply Comment di kolom komentar Blogger, atau mengatasi balas komentar blog yang hilang.
   
kotak reply komentar  blog
TOMBOL untuk membalas atau menjawab komentar (Threaded Comment, Comment Reply) di blog menjadi isu tersendiri di kalangan blogger. 

Pasalnya, banyak blogger yang "kehilangan" menu untuk merespons komentar yang masuk di blognya.

Rupanya, CB juga mengalaminya, yaitu ketika memodifikasi template BTube yang CB "sulap" menjadi Template Blog Simple Magz yang Super SEO Friendly.

Normalnya, di kotak komentar blog Anda ada tombol "Reply" atau "Balas Komentar" tepat di bawah kotak komentar yang masuk. Dengan begitu, Anda "ngobrol" langsung dengan masing-masing pengunjung yang komentar.

Nah, bagaimana jika tombol reply comment itu tidak ada? Dari hasil "riset online" alias Googling, CB menemukan banyak sekali tips atau cara memunculkan balas komentardi blog itu. Tidak kurang dari 10 cara yang berbeda! WOW!!!

Anda yang punya masalah dengan reply comment di blog ini, bisa mencobanya satu per satu. Semoga saja percobaan pertama langsung berhasil. Amin.......!

10 Cara Menampilkan Tombol Balas Komentar di Blog

Berikut ini cara memunculkan link tombol reply komentar. Namun, sebelumnya lakukan setting lebih dulu di Dashboard Blogger Anda. Ikuti langkah ini:

1. Klik "Setting"
2. Klik "Posts and Comments"
3. Pilih "Embedded" (Tersemat)
4. Save!
5. Klik "Other"
6. "Post Feeds" pilih "Full"
7. Save!

Coba cek, apakah balas komentar sudah berfungsi? Jika belum muncul juga, atau sudah muncul tapi tidak bisa diklik (unclickable), berikut ini 10 cara memunculkan link tombol reply komentar. 

Coba saja satu per satu. CB sih sering langsung sukses dengan cara 1 dan 2 atau 3.

CARA #1

Biasanya, balas komentar tidak muncul di template blog yang sudah di-customize, terutama yang kode pentingnya diganti, seperti <head> dan <body>. Coba lakukan langkah ini:

  1. Cari (Ctrl+F) kode &lt;head&gt; atau &lt;!--<head>--&gt;&lt;head&gt;
  2. Hapus kode tersebut dan ganti dengan kode aslinya, yaitu <head>
  3. Cari kode &lt;/head&gt;  atau &lt;!--</head>--&gt;&lt;/head&gt;
  4. Hapus dan ganti dengan kode aslinya, yaitu </head>
  5. Cari dan hapus kode &lt;!--</body>--&gt;&lt;/body&gt;
  6. Ganti dengan kode asli bawaan Blogger, yaitu </body>
  7. Save!

CARA #2

1. Template > Edit HTML
2. Ganti kode <b:include data='post' name='comments'/> dengan

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

CARA #3

1. Template > Edit HTML
2. Cari kode seperti ini :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

3. Ganti dengan kode berikut ini :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

4. Save!

CARA #4

1. Template > Edit HTML
2. Hapus/ganti  kode yang diawali dengan 

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

dan diakhiri dengan

</b:includable> 

dengan kode di bawah ini:

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-

results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

Cara #5 Menampilkan Balas Komentar di Blog

1. Template > Edit HTML
2. Cari kode <div class='post-outer'> atau <b:if cond='data:post.includeAd'>
3. Di antara kedua kode tersebut terdapat kode seperti berikut :

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
         </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
         </b:if>
         </div>

4. Hapus semua kode tersebut dan ganti dengan kode yang ada di bawah ini:

           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
           <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
           <b:else/>
           <b:include data='post' name='comments'/>
          </b:if>
         </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
           <b:if cond='data:post.showThreadedComments'>
         <b:include data='post' name='threaded_comments'/>
           <b:else/>
           <b:include data='post' name='comments'/>
          </b:if>
         </b:if>
        </div>

Cara #6

1. Ganti kode <b:include data='post' name='comments'/> dengan

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Cara #7

1. Copy dulu blogID Anda yang ada di Address (blogID=xxxxxxxxxxx)
2. Temukan kode <dd class='comment-footer'>
atau
<b:include data='comment' name='commentDeleteIcon'/>

3. Tambahkan kode berikut ini di bawah salah satu kode tersebut:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=xxxxxxx&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C %61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; +
data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href,
&quot;bloggerPopup&quot;,
&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;);
return false;'><img alt='Reply To This Comment' src='http://4.bp.blogspot.com/_mWrR0-
gomZ0/TIIfWolwWgI/AAAAAAAAARE/nwiHJLeqSVw/s1600/reply.gif'/></a>

Cara #8

1. Template —> Edit HTML
2. Ganti kode
<b:includable id=’threaded_comment_js’ var=’post’> .... hingga kode </b:includable>
dengan kode di bawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

Cara #9

1. Template > Edit HTML
2. Temykan kode <data:commentpostedbymsg/>
2. Simpan kode berikut ini di bawahnya:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID NUMBER&amp;postID=&quot; + data:post.id + &quot;&amp; isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; +
data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F
%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;,
&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;);
return false;'> <img alt='Reply To This Comment' src='http://1.bp.blogspot.com/-
39DoCOYzEbQ/TtubLZruk2I/AAAAAAAAALs/qEonXrhGcqE/s1600/reply.png'/></a>

Cara #10 Tips Termudah Memunculkan Balas Komentar

Ini cara termudah. Ada 3 cara:

1. Ganti template!
2. Kontak desainer template blog Anda!
3. Minta tolong, sewa, atau bayar orang lain untuk memperbaiki masalah reply komentar ini!

Tips Bonus: Reply Comment without Pop Up Box!

Jika reply comment And berupa kotak Pop Up, lalu ingin menggantinya dengan yang "biasa" alias tidak muncul pop up, maka gunakan tips ini: Threaded comments for blogger without popup window
(http://artistutorial.blogspot.com/2013/04/threaded-comments-for-blogger-comment.html)
Nah... 'kan... banyak banget cara mengatasi masalah reply komentar alias Cara Menampilkan Balas Komentar (Comment Reply) di Blog? Anda punya cara tersendiri? Share with us!

Link Sumber:

Jika uraian CB soal menampilkan reply comment blog di atas dianggap "membingungkan", silakan langsung ke sumbernya berikut ini:
  • http://xomisse.com/blog/fix-reply-button-blogger-comments/
  • http://www.makingdifferent.com/how-to-reply-button-not-working-in-blogger-threaded-comments/
  • http://www.bloggertricks.net/2013/05/how-to-add-reply-button-to-blogger-comment.html
  • http://www.bloggerplugins.org/2012/01/threaded-comments-for-blogger.html
  • http://www.betatemplates.com/2012/01/how-enable-threaded-comments-blogger.html

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

33 comments on Cara Menampilkan Balas Komentar (Comment Reply) di Blog

  1. sangat lengkap dan mendetail banget tutorial reply komentarnya gan...sangat berguna untuk sayah yang katrok dan nubi ngebloknyah yeuh.
    bolehkan di capluk satu ripleynyah yah
    ente emang hebat gan

    ReplyDelete
    Replies
    1. bagi atuh ubi cilembu na mang..... ambeh hitut bae,,, haha ha....!!!

      Delete
    2. sampeyan memang <img alt="http://2.bp.blogspot.com/-FLx1obgG-J8/VTVGE-UIDWI/AAAAAAAABZo/pX3534h6jjQ/s1600/2%2Bjempol.jpg/> tertolong dari tutor ini,makasih om

      Delete
  2. lc buat komentar Blog+FB gimana gan.
    Sekolah SDE

    ReplyDelete
  3. membantu sekali artikelnya mas,

    ReplyDelete
  4. Makasih sob, sngat membantu artikelnya.

    ReplyDelete
  5. Kok saya coba ga bisa terus yah?

    ReplyDelete
  6. saya ucapkan terimakasih yang sebesar-besarnya buat postingannya hehehe....
    amat sangat membantu blog saya
    semoga makin rame dan sukses ya buat blognya
    go go go semangat!!!

    ReplyDelete
  7. gan, bales comment gak muncul itu apa dipengaruhi jg sama template nya ya? di edit html saya gak ada semua kode2 diatas..

    ReplyDelete
  8. aku udah nyoba cara 4 sama 8 kok tetep ngga bisa balas komentar ya??? tolong bantu :(

    ReplyDelete
  9. utk cara yg ke 2 itu banyak ka kode , yg mana yg hrus d ganti?

    ReplyDelete
  10. thanks bgt yaa. akhirnya tombol "balas" gw kembali lagi. jgn lupa mampir ya di blog aku http://srydevitanani.blogspot.co.id/ keep writing :)

    ReplyDelete
  11. terimakasih sangat membantu :)

    ReplyDelete
  12. Thanks gan, ane cari muter" cuma ini yg paling lengkap dan bisa fix masalah ane.

    ReplyDelete
  13. ditemplate gua, yg cocok tips nomor 6. ada lebih dari satu di template gua, yg pertama gagal baru yg kedua berhasil. thanks.

    btw, mending diperbolehkan menyertakan link, mbok ya sesama blogger saling bantu. tentunya yg bukan spam

    ReplyDelete
    Replies
    1. cara 6 works. udah ane coba. tapi tampilan thread komentar jadi lebih sederhana. beberapa tampilan jadi hilang. kalo di blog ane sendiri, space antar barisnya juga jadi makin rapet. ga tau kenapa

      Delete
  14. Bagaimana mengatasi tampilan profile komentar yang blank.

    ReplyDelete
  15. info penting yg munkin membantu nih. saya termasuk pemakai template gratis dari contohblog, dan baru beberapa hari terakhir baru menyadari masalah ini.

    tapi apa kalian tahu, kalau masalah ini tidak terjadi jika blog dibuka di browser smartphone, walaupun dengan request desktop site.

    saya sendiri baru mau mencoba cara-cara di atas. semoga ada yang berhasil, dan bukan hanya untuk sementara saja. mungkin ada yang sudah berhasil? mohon pencerahannya..

    btw blog saya weakwings.blogspot

    ReplyDelete
  16. kalo ga percaya coba buka postingan blog masing2 dengan menambahkan "?m=1" di akhir link, untuk membuka blog di komp desktop dengan meminta tampilan mobile. poof! secara ajaib masalah hilang.

    saya sendiri ga tau penjelasannya. mungkin mastah2 ada yang tahu?

    ReplyDelete
  17. btw cara 2 dan cara 6 sama tuh..

    ReplyDelete
  18. Arigatouuu.. cara kedua langsung boomm bisaaa ^^

    ReplyDelete
  19. Setelah bolak-balik ternyata cara pertamalah solusinya. mksh

    ReplyDelete
  20. nampaknya templet blog saya gak support

    ReplyDelete
  21. Makasih gan. Dengan cara pertama aja, blog saya sudah ada tombol replynya. Sangat bermanfaat. Thanks.

    ReplyDelete
  22. Terima kasih sangat membantu

    ReplyDelete
    Replies
    1. Sama-sama, semoga kolom komentarnya sudah muncul ya...

      Delete

Contact Form

Name

Email *

Message *