Hướng dẫn sử dụng song song hệ thống comment của Blogger và G+

Sau bao ngày trăn trở vì tiếc cái comment của G+ khi bỏ nó đi để dùng hệ thống comment mặc định của Blogger. Bỏ thì thương mà vương thì tội. Cuối cùng hôm nay mình cũng lần ra cách sử dụng song song 2 hệ thống comment này.

Và đây là hướng dẫn chi tiết các bạn cách thực hiện để có được hệ thống comment này nhé.

Bước 1:

- Các bạn vào chỉnh sửa mẫu

- Tìm đến đoạn code có dạng như sau (hơi dài tý nhé)

<b:includable id='comment_picker' var='post'>
...
</b:includable>

Thay thế nó bằng đoạn 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>

- Hình ảnh minh họa:

Ảnh minh họa 1

Bước 2:

- Tiếp đến các bạn tìm đến đoạn code sau (cũng hơi dài một tý):

<b:includable id='threaded_comments' var='post'>
...
</b:includable>

- Thay thế nó bằng đoạn sau:

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
<img id='comments-norm' class='comment-on' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPjnp6iiTNxAYH2-sFXYVPn9gY22iGrci0St2yQJ6VOZ-QwJ5QCqjQw-IuAfdrEkys4pFuNnMdV8Qkzb0_zUcH0gVMPlW8sb-cwGAsIX9JIBu44Nz8pQa_qqTcBqQLxyvKq7tgeP5u3hn/s50/blogger_on.png' title='view Blogger comments' /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBl2WhcJuzsIP7PZSiG878TKv5n5Hl97qRLTefsWSl_UnKZFTQodL06kSDYC4jhGBdCCS7pWm4WIIIqU6nRGSvJKUNUbv9sehKmioU-lJ2pbRMf_9NYOlQizh3t2-KQ2ZpKvwcID3CQTP3/s50/bubbles.png' /><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzbaLYGwIj_WmEFnhCe7kPYF4uCij9aV2cK2E3tdTgDFki0NWnDdtijjIx0HBwH7oxF85crSce2pYBLPOMfm3UThMh964d92e48QGnkq18FRM5Xkdgi7j2pLjk42ywDmH0D9aH7zyquu8/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 + "_backlinks-container"'>
<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','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPjnp6iiTNxAYH2-sFXYVPn9gY22iGrci0St2yQJ6VOZ-QwJ5QCqjQw-IuAfdrEkys4pFuNnMdV8Qkzb0_zUcH0gVMPlW8sb-cwGAsIX9JIBu44Nz8pQa_qqTcBqQLxyvKq7tgeP5u3hn/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzbaLYGwIj_WmEFnhCe7kPYF4uCij9aV2cK2E3tdTgDFki0NWnDdtijjIx0HBwH7oxF85crSce2pYBLPOMfm3UThMh964d92e48QGnkq18FRM5Xkdgi7j2pLjk42ywDmH0D9aH7zyquu8/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','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnvW73S3FpzLsRE8OS7vrkbImJXLhws6ic3060BuDzTx55q6TVpr_uNqqFz5ZcEvQ6vvQEqOI_aaix6tvCWIZfEZA_GUmthBcHbhsZot5aB2WDLEtmV3EwQ-nHHnvOGuduOTix4kJwa-P/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjw22IEmD-2AHl7DHmYbqvIYJ24t4VyjltOkZ-iQ5jtYXhDGAuBqWF1QMUGz_v10R9-8KvFDPOkemZWNY22Z4c9v1FJ7QfxOV1TokmESLM3zuwuaXqXyjOKkJFlMiYR4BE_bvfaNutpgC/s50/plus_on.png');
});
$('#comments-norm').hover(
// switch to normal comments displaying
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPjnp6iiTNxAYH2-sFXYVPn9gY22iGrci0St2yQJ6VOZ-QwJ5QCqjQw-IuAfdrEkys4pFuNnMdV8Qkzb0_zUcH0gVMPlW8sb-cwGAsIX9JIBu44Nz8pQa_qqTcBqQLxyvKq7tgeP5u3hn/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnvW73S3FpzLsRE8OS7vrkbImJXLhws6ic3060BuDzTx55q6TVpr_uNqqFz5ZcEvQ6vvQEqOI_aaix6tvCWIZfEZA_GUmthBcHbhsZot5aB2WDLEtmV3EwQ-nHHnvOGuduOTix4kJwa-P/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
// switch to gplus comments displaying
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjw22IEmD-2AHl7DHmYbqvIYJ24t4VyjltOkZ-iQ5jtYXhDGAuBqWF1QMUGz_v10R9-8KvFDPOkemZWNY22Z4c9v1FJ7QfxOV1TokmESLM3zuwuaXqXyjOKkJFlMiYR4BE_bvfaNutpgC/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzbaLYGwIj_WmEFnhCe7kPYF4uCij9aV2cK2E3tdTgDFki0NWnDdtijjIx0HBwH7oxF85crSce2pYBLPOMfm3UThMh964d92e48QGnkq18FRM5Xkdgi7j2pLjk42ywDmH0D9aH7zyquu8/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>

- Đoạn mình bôi vàng các bạn có thể thay bằng đoạn này cho giống của mình (Nói chung không thay cũng được):

<h3><b:if cond='data:post.numComments == 0'> 0 Người nói về "<data:blog.pageName/>"</b:if> <b:if cond='data:post.numComments == 1'> 1 Người nói về "<data:blog.pageName/>" </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Người nói về "<data:blog.pageName/>" </b:if></h3>

- Hình minh họa: