Google+ And Blogger Comment System Together In Blogger

Day before I've talked about how to use disqus and google+comment together in blogger. Today I'll explain some very simple steps on how to use default blogger comment along with Google+ comment system. Though blogger's threaded comment system can't control spam like disqus, but yet it is effective and also the favourite comment system for many bloggers even today.

So let us see now how you're going to make both of them work together in same time. Just follow the instructions I'm elaborating below

• Open Blogger Dashboard → Template → Html Editor
• Open Blog1 from widget list menu
• And search (by pressing Ctrl+F) <b:includable id='comment_picker' var='post'>

Screenshot

• Select the whole piece of code shown in screenshot and replace it with below given code.

<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>

• Now Search for <b:includable id='threaded_comments' var='post'> 
• Select the complete code from <b:includable...> to </b:includable> 
• And replace it with the below given code.

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png' title='view Blogger comments'/>
  <div class='choice'>Comment With Your Choice</div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/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>
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/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/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/AVvXsEhD25geRqgdVNKLCI4QmigSisdn9o6M7_dHONfneQZpgh97cyCU52hg0mUMsxaP_pR2W2daLPB4VILAJstWpFt53THOSA87Vt0hyNdFmfZG21cOz4VXFTJj5GR8ECdlMAbp98LueS_lRItB/s50/blogger_off.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/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/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png');} 
 },  function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD25geRqgdVNKLCI4QmigSisdn9o6M7_dHONfneQZpgh97cyCU52hg0mUMsxaP_pR2W2daLPB4VILAJstWpFt53THOSA87Vt0hyNdFmfZG21cOz4VXFTJj5GR8ECdlMAbp98LueS_lRItB/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/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/s50/plus_on.png');} 
 },  function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png');} 
 }
);
</script>
</div>
</b:includable>

After proper replacement save the template and preview you site pages.
I would like to thank David Kutcher of Blogxpertise for providing this source code and he is only the creator of this widget.