All About Blogging: Blogger And Google Plus Comment System in Blogger Blog

Blogger has its own default commenting system and instead of it Google also offers google+ commenting system in the blogger blogs but many bloggers got this often difficult and not good because google+ comment system forces visitors to make google account to comment using google+ comment box. And it seems that this discouraged many visitors to comment constantly on the any blogger blog and among those visitors I am the one. If you get comment from the google+ comment box, then blogger never notify you. So that you can not respond to the visitors and this makes you unfriendly behavior with your visitors which can be a worst reason of decreasing of visitors on your blogs and sites.

The one and only way of solving this problem is adding of the both the commenting system: Blogger Default Commenting System and Google Plus Commenting System on your blog which can be a good for your blogger because if a visitor want to comment using google+ commenting, he/she can and if he/she want to comment using blogger default comment box then he/ she also can use them.

So your visitor will get 2 option either Blogger Default comment Box or Google+ comment box

How to Add Blogger And Google Plus Comment System in Blogger Blog With Toggle?

Here is the Step wise process to add this system on your blogger. Lets go through step by step.

Step 1: First of all login in your blogger account and the just go to the template option just press edit html and find the following code

<b:include data='post' name='post'/>

Step 02: Now copy the given code and paste it just after the above code.

b:if cond='data:blog.pageType == "item"'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyb8XZPlEm9ANwN4Q9nQxdd8HNiT5RRTmOkpfD4dUT75la5wf-1jBkzLhTWbgMWue_LyLUNZ0K88PR9N5uXq1eNnRWLQwwX9Hm6DpsCIPc_XHb9vefI3tfbf0Jb-eHL_t2ecmjLHfjkgQ/s1600/gp.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",Arial,sans-serif; color: #555; font-weight: bold; padding: 10px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Choose a Comment System: <a class='show-hide-comments' href='javascript:void();' onclick='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eSDZjU87GUWYmPv7cKvo5WK8BGHZv26e3-y06ZXgfxCqXhyphenhyphen5MUFiogDlQguNKznKosBDXALtHmHhHD2Ch4WLFqyD3DM6wOQjORtXv9_SYo_tuQ3oUMWNlwyq-fSZxSm_oFyBuWVCb0iw/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhpMsjRcHBkQrBVXBqVlBYUFMCMnE_vbfnonm-jdJff8-bs5fEoNy_Vg12jQEGIGbbF1c3-T0kH7afoTPZwzO-O3ry9fK1oL7fTGmwEByS3DZF6X1HlVmAartmFM7iSOfoRY70XYdvsFR/s1600/blogger-logo.png' width='36'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='630' expr:data-href='data:post.url'/>
</div>
</b:if>

Step 03: Now save your template

Note: You have to add the following google api if it does not exist already on your template. And you can change the width of the comment box just changing the value of the data-width attribute.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Watch Demo