I have just been through creating my second site.My first site was www.blogshear.com, which i unfortunnaly had to delete for unforseen reasons.And today when i checked back ,i found that Google+ comments system has been becoming prominent.So i thought of bringing both google+ comment system and bloggers default commenting system together.and just to let yu know-I DID IT ! Lol..Now i will be sharing how to add both blogger and google + commenting system to blogger..
Find this code in your template
You may not have JQuery libraries installed in your template. To add them copy/paste the following code and add it into your Template right before </head>:
All done ready and set for action.With this we have learned how to add both the commenting system together...So enjoy G+ and Blogger together...
Quick Notes.
- Adding this codes with automatically enable the Google + commenting option.You do not need to enable it from the blogger dashboard .if you did then undo it..
- The previous comment are not lost.
- All the image shared are personally created by me you can change it according to your personal choices..
- You at least require 1 comment for this to show up..
Adding G+ comments | Blogger comments
Find this code in your template
<b:includable id='threaded_comments' var='post'>
...............................................................................
...................................................
................................................................
</b:includable>
Now replace the entire code [ the whole code searched ] with the below code
<b:includable id='threaded_comments' var='post'>
<div id='comment-header'><center>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png' title='view Blogger comments'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQWT32Y6fvbkRMc5F8krXX-22FIXEfl2m2IuDLOP7VTOle28Yrt6JioMO3pNITR1xN8kcM4xEXOM76wRe3XJ23PEVGE_paRuRS8iLYIshkCahcidCFxxbLrAqjUMsizydLCCCjXNN/h120/comment-bubbles-big.png' style=''/><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/s50/plus_off.png' title='view Google+ comments'/></center>
</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>
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/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/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/AVvXsEhP_Sy4V8G_6zOkReDv_3C4swacuMafsB5droYGHoq7L7aOLdkzMBZqqX55J5O7mgDRotY6E1H66PB9fvCvoX6qT3pCwl3cQMNfKSe7G77PzpY35ObVfcd-bNLv30Y8x9_QKj03VRW-ZDAU/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1SKYuV7RK6FE9CbcBf2u4glIti4e9Y6X2keTQDB3-z03_jfzsvp7v2qKS_P-sf8AfKrFYjHb9zuff4Z_6o3I6abxv9wajOVSYOTJoq-Hzov42umrxSTZeMjzh9KA4dHbKs8YYIHDMMh9A/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/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_Sy4V8G_6zOkReDv_3C4swacuMafsB5droYGHoq7L7aOLdkzMBZqqX55J5O7mgDRotY6E1H66PB9fvCvoX6qT3pCwl3cQMNfKSe7G77PzpY35ObVfcd-bNLv30Y8x9_QKj03VRW-ZDAU/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/AVvXsEg1SKYuV7RK6FE9CbcBf2u4glIti4e9Y6X2keTQDB3-z03_jfzsvp7v2qKS_P-sf8AfKrFYjHb9zuff4Z_6o3I6abxv9wajOVSYOTJoq-Hzov42umrxSTZeMjzh9KA4dHbKs8YYIHDMMh9A/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/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>
Now find the following code
<b:includable id='comment_picker' var='post'>
......................................
............................................................
.........................................
</b:includable>
Replace the whole code with the following 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>
If it doesn't work...
You may not have JQuery libraries installed in your template. To add them copy/paste the following code and add it into your Template right before </head>:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
All done ready and set for action.With this we have learned how to add both the commenting system together...So enjoy G+ and Blogger together...
SHARE THE HUMOR