[SHARE] cách sử dụng song song nhận xét của Blogger và Google Plus

Xin chào các bạn, chắc hẳn các bạn cũng biết rằng: Google đã tích hợp sẵn vào Blogger một tiện ích khá hay đó là khung nhật xét của Google Plus, nó giúp chúng ta có một khung nhận xét cả hai bên liên kết với nhau - từ bài đăng trên blog và bai đăng đó được tự động chia sẻ lên Google Plus - điều này khiến khách truy cập ở cả hai bên đều có thể nhận xét trên cùng một hệ thống nhận xét. Để kích hoạt tính năng này thì đơn giản bạn chỉ cần bật nó lên trong phần tùy chỉnh của Blogger là được.
Vậy tại sao lại nảy ra ý tưởng sử dụng chung cả hai hệ thống nhận xét này, để làm gì vậy? Lý do để sử dụng tính năng hấp dẫn này mà khỏi vướng vào trường hợp khi thay đổi tiên miền đang sử dụng, những nhận xét ở Google Plus sẽ không hiện trên Blogger nữa, ngoài ra người dùng có thể thoải mái lựa chọn hệ thông nhận xét mà họ muốn.

Một thời gian tìm tòi trên mạng, mình đã tìm được một hướng dẫn của tác giả +David Kutcher về cách sử dụng song song hai nhận xét này Blogger và Google Plus trên blog của ông ấy Blogger xpertise, hôm nay xin được chia sẻ lại tai đây với mọi người muốn sử dụng.
Bước 1: Blogger => Chủ đề => Sao lưu / Khôi phục => Tải chủ đề xuống
(Bạn hãy sao lưu template trước khi làm nhé, nhỡ đâu bạn lại không muốn sử dụng nó nữa)
Bước 2: Đóng lại => Chỉnh sửa HTML
Bước 3: Các bạn tìm đến đoạn mã sau:  <b:includable id='threaded_comments' var='post'> bôi đen từ đó đến thẻ đóng của nó  </b:includable> .Và thay nó thành đoạn code sau:

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img id='comments-norm' class='comment-on' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments' /><img src='http://lh4.googleusercontent.com/-TZUsaFaiAJM/UXVi6qJ1vjI/AAAAAAAAILk/GDdUhxz_51I/s50/bubbles.png' /><image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments' />
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '750',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
// switch to normal comments displaying
$('#gcontainer').css('display','none');
$('#comments').css('display','block');
$('#comments-norm').addClass('comment-on');
$('#comments-gplus').removeClass('comment-on');
$('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');
$('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
// switch to google plus comments displaying
$('#comments').css('display','none');
$('#gcontainer').css('display','block');
$('#comments-norm').removeClass('comment-on');
$('#comments-gplus').addClass('comment-on');
$('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');
$('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');
});
$('#comments-norm').hover(
// switch to normal comments displaying
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
// switch to gplus comments displaying
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');}
}
);
</script>
<style>
#comment-zone {
position: relative;
}
#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
}
</style>
</div>
</b:includable>

Bước 4: Tiếp tục tìm đến đoạn mã sau :  <b:includable id='comment_picker' var='post'> và bôi đen từ đó đến thẻ đóng  </b:includable> của nó. Rồi thay nó thành đoạn mã sau:

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Bước 5: Các bạn tìm đến thẻ  <head> và thêm đoạn JS sau vào sau nó:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Bước 6: Lưu lại template và xem kết quả.
Code: +David Kutcher