Note: We need atleast 1 comment to show both commenting systems together. Your default comment system will be shown to your first commentor.
How to Use Both Systems:
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Search For Below Code
<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>
- Replace The Above Code With The Following.
<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>
- After replacing the code, once again search another below code.
<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>
- Again Replace This Code With The Following One
<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/AVvXsEgoYaiJ4oiiEm-r1LSGpOdfEVg68mnC7eigH9_QYV4Wo9QfEJ3A4gCXttFeUYCd_Qi2tUoVOY2tSEBKCeIquPytXq2dXv1fDxO74_e4As19BObDR-Y6EU4VxS27tuEt79fS84TsSD3hjkp_/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTET9nuRsY7QJNsf82WqoaJLJE2eWcPEWLI2hiw_Q0i9Yy6ifpjI5rueuoKxmkvvqqetDZAbd7nCHaH_jVw2nKOWoeorBIfgUsVYhDG0WKDOeT7cceErD9MAwz8tQJKU1LRH7x8rHyF8sW/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsmbb'><a href='http://www.mybloggerbuzz.com/2013/12/use-blogger-and-googleplus-comment-system-together.html' id="mbbrights">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 + "_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 src='https://googledrive.com/host/0B2ww3WS8P1MJc1RycDQwczNWMEE'/>
<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;
}
#copyrigtsmbb {
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;
}
#copyrigtsmbb a {
text-decoration:none;
color:111!important;
}
</style>
</div>
</b:includable>
- Now finally save the template and you are done!
