Rabu, 27 Mac 2013

Komen Reply JS Yang Canthek Lagi Menawan


Assalammualaikum w.b.t, dan salam sejahtera kepada semua pembaca blog is nie. Akhirnya is dapat gak curi-curi blogging setelah duduk dalam alam kebuntuan menggelembungi diri is dua tiga hari nie.

So ini adalah tutorial untuk komen reply bagi yang guna Comment Thread sahaja, kalau yang lain tak boleh ok? kalau nak tukar ke thread komen dulu wokay? Kurang jelas? Baca lagi sekali ayat nie selama 41 kali insyaallah.

santai, reply, button, js, javascript, comment, threaded, blogging, tips, Santai iskandarX,


So, tutorial is request by mrpolie korang leh lawat dier punya blog dengan mengklikkan nama dier ok?

Ok ikuti langkahan berikut untuk menukar thread korang punya style.

santai, reply, button, js, javascript, comment, threaded, blogging, tips, Santai iskandarX,





Langkah 1
menukar code:

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

note: ada 4 code <b:include data='post' name='comments'/> dalam template TFBV2 dan semuanya is ubah

menjadi:

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

*Template > Edit HTML > Tick Expand Widget templates > HoldPress CTRL+F  dan pastekan <b:include data='post' name='comments'/>, dan jumpa highlight <b:include data='post' name='comments'/> dan tukar ke
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>


Langkah 2
is ganti code javascript threaded comment menjadi:

<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' 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>' + 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>

*Template > Edit HTML > Tick Expand Widget templates > HoldPress CTRL+F  dan pastekan <b:includable id='threaded_comment_js' var='post'>, gantikan <b:includable id='threaded_comment_js' var='post'> sehingga </b:includable> dengan javascript yang is letak diatas ini ok? xpaham sila komen.

Booom dah siap, :P


Update:

Ok langkahan 2 nie  korang diperlukan mencari code javascript yang sedia ada dalam template korang tu, so pergi ke Template > edit HTML > thick expand widget > paste
<b:includable id='threaded_comment_js' var='post'> dan highlightkan
<b:includable id='threaded_comment_js' var='post'> sehingga </b:includable> dengan :



<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' 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>' + 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>

ok dapat tak?

Hasilnya:



18 ulasan:

  1. Thanks bro IskandarX... Nanti saya cuba.. nanti saya kongsikan hasilnya...

    BalasPadam
    Balasan
    1. Kat template saya ada 5 kod ni... nak kena gantikan semua kelima2 ke bro

      Padam
  2. ok kalau ada lima gantikan kesemuanya sekali, sebab template is ada je.

    BalasPadam
    Balasan
    1. isk isk isk, tertinggal huruf pulak, is ulang:

      ok kalau ada lima gantikan kesemuanya sekali, sebab template is ada 4 je.

      Padam
  3. Langkah 1, lepas save ok...

    Lepas je masukkan java script tu.. dia keluar ni

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "b:widget" must be terminated by the matching end-tag "".

    Error 500

    BalasPadam
    Balasan
    1. ahaaaa, mrpolie kena code dan paste ke notepad dulu untuk menyahkan coding2 yang melekat kat javascript tu, pastikan mrpolie highlight cun-cun javascript yang lama dan pastekan pun cun-cun ditempat yang sama.

      Padam
    2. addduuuhhh code dan pste lak, isk isk, copy paste ke dalam notepad dulu baru copy balik dari notepad ke blog template mr polie.

      Padam
    3. Ok... dah buat.. step by step.... dah tak ada error, tapi tak ada apa2 perubahan yg berlaku arr...

      Padam
    4. iyer ker tak der perubahan? jap is gi komen blog mr.polie jap ok? karang balas komen tu.

      Padam
    5. Ok, so kesannya adalah pada komen yang baru selepas ubah script lah erk.... ook faham, so komen yang dah sedia ada tetap mcm tu... ok faham² dah.. Thanks bro Is coz sudi membantu hamba yang baru nak merangkak ni.... Nanti wa belanja teh tarik...

      Padam
    6. hmmmm bukan takat komen baru je, dia akan transform ...... yang lama sekali yang belum di reply, kalau dah ada reply dia tak leh transform ....... sebab dia tak geng dengan Autobot heheheheeee.

      Padam
    7. Ook... faham setakat yang ni... Bila dah masuk Autobot tu kena blaja lain, coz kalo ada autobot tu.. lawan dia Transformers Decepticons... Hehehehe gurau je Is... btw thanks again, Ni ngah joget² ni coz berjaya.... hehehehehehehehe

      Padam
    8. orait paham pun, makna kata lain Hikmat dorang berbeza dan Reiatsu dorang pun berbeza hehehehe tak per is senang kalau bagi contoh macam tu, fast learning.

      Padam
  4. nampak kemas. sesuai dengan blog is ni. sbb blog is ringan.

    BalasPadam
    Balasan
    1. nak lagi kemas js nie kena pakai css dia pulak, tapi kena pakai template sama dengan is baru ok sebab coder dia bina css tu dia djust hanya untuk template thesis je. tapi is akan try rip untuk kegunaan template lain pulak.

      Padam

Sekiranya is ada menguris hati yang membaca ini... is pohon kemaafan, dan seribu keampunan dari ujung rambut sampai ujung kaki..
I Luv All Of You Commenters OF My Blog
is terpaksa Moderated Kan Komen sebab is tak perasan komen masuk bila login kat dashboard, kesian sahabat kita ada yang komen is lambat balas.

Related Posts Plugin for WordPress, Blogger...