Membuat Komentar G+ Berdampingan dengan Komentar Blogger Terbaru - Seperti yang kita ketahui, Google menambahkan fitur baru dengan menambahkan Komentar G+ di Blogspot beberapa waktu yang lalu. Sistem komentar baru ini sangat bagus untuk Blog milikmu, jika pembaca Blog kalian aktif di G+.
Sebenarnya mengaktifkan Komentar G+ sangatlah mudah, tinggal menuju menu Google+ lalu centang Gunakan Google+ Komentar di blog ini (bisa kalian lihat pada gambar di bawah)
1. Jangan lupa Backup terlebih dahulu template kalian untuk menghindari hal-hal yang tidak diinginkan.
2. Buka menu Template kalian lalu klik Edit HTML, lalu search <b:includable id='threaded_comments' var='post'>. Kamu akan menemukan kode seperti ini:
<b:includable id='threaded_comments' var='post'>
.................
.................
</b:includable>
3. Ganti kode yang saya beri warna merah diatas dengan kode dibawah ini
<b:includable id='threaded_comments' var='post'>4. Masih di Edit HTML, search kode berikut <b:includable id='comment_picker' var='post'>, nanti akan ketemu kode seperti ini:
<div id='comment-header'>
<img id='comments-norm' class='comment-on' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCGzFirRJMVtMDiIEkWlKim1poAnOMcko0WTt0dwTnFAaYo4G7bdoWs9us1vNxuUianvy1NA0riCarDV2MYgNXsmalkYygCFbSYzzoVdyk6V6-2I1tpgPsHQnXXm6J9z63ymk-nalPcsQY/s50/blogger_on.png' title='view Blogger comments' /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gV5qf4ZjUkQyGIEh27McVIqk23Vx576xUTjlSU_-aNxgRZDgPKj42_nNJ2QxWmWYF5M4EM2ms0xn1KE38xF9hRH-kWjBw0WtjqPckLT7Ul1IU5ODYfxO-3AYgEeEVc5HiOq1qv9pEDD8/s50/bubbles.png' /><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTsrsraYg_cqk6AtzclT1IW2D-p8aC0SWliZPou2UIyntxTKhiJMmRmd1VL2KAReLECflyVBWacfxTiiK4LA_PuQ8uoba_tbficMe87NClhy8S9pDjxdkUgHfiAEb0ly01C8IN8M-xatU/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/AVvXsEjCGzFirRJMVtMDiIEkWlKim1poAnOMcko0WTt0dwTnFAaYo4G7bdoWs9us1vNxuUianvy1NA0riCarDV2MYgNXsmalkYygCFbSYzzoVdyk6V6-2I1tpgPsHQnXXm6J9z63ymk-nalPcsQY/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTsrsraYg_cqk6AtzclT1IW2D-p8aC0SWliZPou2UIyntxTKhiJMmRmd1VL2KAReLECflyVBWacfxTiiK4LA_PuQ8uoba_tbficMe87NClhy8S9pDjxdkUgHfiAEb0ly01C8IN8M-xatU/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/AVvXsEjKvu8wR77o5Czv1Vm40iSLfUE05BAM3AYz8xOD4FXwus3HhhCeUltHIO-nUZtd6oasg2jlEfCzW5fc95bkoOvHvRZXR7bwA78WJmWJ2wFXG3W6f2e72bNBhIdf4eYqrqXXD8j9tr2z9_LY/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40Hrdktvil-7JDgi5-me9JOcU1Ig4LOdg2ZUB9cRluYNYjPZQzJyB-CnFSAUfhHE8K5lYgN7xkq80ihANFSCGkird_6atfpabWO2WOZWxNDNuu7lkKzvwKGGI5d8Pja9n7TBKtbHuzm5w/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/AVvXsEjCGzFirRJMVtMDiIEkWlKim1poAnOMcko0WTt0dwTnFAaYo4G7bdoWs9us1vNxuUianvy1NA0riCarDV2MYgNXsmalkYygCFbSYzzoVdyk6V6-2I1tpgPsHQnXXm6J9z63ymk-nalPcsQY/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvu8wR77o5Czv1Vm40iSLfUE05BAM3AYz8xOD4FXwus3HhhCeUltHIO-nUZtd6oasg2jlEfCzW5fc95bkoOvHvRZXR7bwA78WJmWJ2wFXG3W6f2e72bNBhIdf4eYqrqXXD8j9tr2z9_LY/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/AVvXsEj40Hrdktvil-7JDgi5-me9JOcU1Ig4LOdg2ZUB9cRluYNYjPZQzJyB-CnFSAUfhHE8K5lYgN7xkq80ihANFSCGkird_6atfpabWO2WOZWxNDNuu7lkKzvwKGGI5d8Pja9n7TBKtbHuzm5w/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzTsrsraYg_cqk6AtzclT1IW2D-p8aC0SWliZPou2UIyntxTKhiJMmRmd1VL2KAReLECflyVBWacfxTiiK4LA_PuQ8uoba_tbficMe87NClhy8S9pDjxdkUgHfiAEb0ly01C8IN8M-xatU/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:includable id='comment_picker' var='post'>
.................
.................
</b:includable>
5. Ganti kode diatas yang saya beri warna merah dengan kode dibawah ini
<b:includable id='comment_picker' var='post'>6. Simpan Template.
<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>
Perlu diperhatikan agar Komentar G+ dan Blogger yang berdampingan tersebut tampil secara sempurna kamu perlu memperhatikan beberapa hal berikut:
1. Jangan mengaktifkan/mencentang Gunakan Google+ Komentar di blog ini (karena hal ini tidak diperlukan)
2. Mungkin tidak ada Notifikasi pada Komentar G+ jika ada yang memberi komentar
3. Kode Komentar G+ ini width Komentar Box nya 750 (saya beri warna hijau), bisa kalian sesuaikan dengan blog kamu
4. Jika script diatas tidak bekerja pada Blog kalian, mungkin di template kalian tidak ada script JQuery libraries. untuk mengatasinya copy paste kode berikut dan tempatkan sebelum kode </head>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
Semoga Postingan saya tentang Tutorial Membuat Komentar G+ Berdampingan dengan Komentar Blogger Terbaru ini bisa bermanfaat bagi kalian. Happy Blogging
