How To Use Blogger And Google+ Comments System Together on Your Blog

Few months ago Blogger Developer team introduced Google+ commenting system for Blogger Blogs. Google+ commenting system helps your visitors to share your content on Google+ network(in his/her circle) and increases your blog traffic as well. But the major problem is that commenting on Google+ needs a Google+ account and there are may be many visitors that don't have Google+ account. We can add Google+ commenting system by removing the default comment system but it limit the scope of your visitor' interaction as many of people don't have Google+ account. So to overcome this problem, here is the solution, You can use Default Blogger Commenting System and Google+ Commenting System together by following simple steps that are given below.

How To Use Both Commenting System Together ?

Well after a bit learning lets start the tutorial hope it will as work on your blog as mine. So follow the simple steps that are given below ::

 Step 1 ::

First you need to create a backup of your templete, so that if there is any kind of problem occurs you can use your backup to restore everthing. 

Go To Blogger > Template > Backup Your Template

 Step 2 ::

Click on the Edit HTML and Search For Below Code

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

Replace The Above Code With The Following that is given below ::

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

 Step 3 ::

After replacing the code, once again search another code that is given below. 

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

Replace The Above Code With The Following that is given below ::

<b:includable id='threaded_comments' var='post'>
  <div id='com-header'>
<h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPN1kU1rbA4WNpj-Gfn7jV_EIlBKlkpA8LljuZdP8kTiHgWo22_PHh-rs7-BiD44iIK1h16_1VOnjwgFQi5wi7tNF4OpdQYiqtOUsavT5O8IiUeHDADucrSrAJNB-k3kDZ6ldDfoWfeVg/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6WqSNkecUSZ1h4IaK62HKJxx_fflEq46-L249yq5PucliswS0M98CEzBmr-vcIppFht3yKxysVdYlKRYwut51SiBCOR4ydclN23sRxiCmujGq2fuG-y-qjRlYF4J7CaP4tzLukE5Q4ete/s50/plus_off.png' title='view Google+ comments'/><h6>Choose Your Platform !</h6>
<div id='copyrigtsmbl'><a href='http://www.alltechmantra.com' id="mblrights">Get This Widget</a></div>
</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 src='https://googledrive.com/host/0B0WJjcJEFNziQU01STJVc3RzeWc'/>
<style>
#gcontainer {
display:none;
  }
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
  }
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 580px;
margin-bottom: 20px;
background: #f5f5f5;
  }
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
#copyrigtsmbl {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
font-size:11px;
background: #fff;
  }
#copyrigtsmbl a {
text-decoration:none;
color:111!important;
  }
</style>
</div>
</b:includable>

Final Step :: Save the template and you have done with how to use Blogger Comments and Google+ Comments System together.

From the Editor’s Desk

So friends this is all about How to use both comments system together and if you face any problem then you can ask via comments. If you feel this is helpful then don't forget to share it.

I would like to thank MyBloggerLab for providing this source code and MyBloggerLab team is only the creator of this widget.

Thankyou for giving your time. Keep Blogging.