You might have noticed a blogger and Google+ comments system in many blogger blogs. Do you want to have the same commenting system with toggle on your blog too? Are you looking for the tutorial?
Then in today's we are going to discuss on the same.
Google+ comment is an awesome new commenting system for
blogger. but the problem is that it requires an account on Google+ before comments. and if your site/blog readers doesn't want to have an account on Google+ then he/she will not be able to comment on your blog posts.
But you don't have to worry for this as we have a great solution for the same is that you are also enable to add blogger and Google+ commenting system together using toggle.
Here is the screenshot of the Google+ and
blogger comment system together with toggle that you can see how actually it looks like.
Now, if you want to have this both commenting systems to be installed on your blogger blog. Then all you have to do is just follow the simple and easy steps given below.
Related : Add Missing Embedded Comments Form to Blogger
How to Add Google+ and Blogger Comments System with Toggle?
Go to Blogger Dashboard > Template > Edit HTML
Press CTRL + F to enable search box, then search for the following code :
<b:include data='post' name='post'/>
Now, After above code, Paste the following 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/AVvXsEjBtDQFzomK-wZOFsSM0uzoafpGSlW80QebayqUAaeAUUXdrp6_4hetsqsEUC1V_j-mbJvof4HYLwh6r_g9oLsK2EIEoR-_S6y5rn-Q6FwnVMzVi7j4OeDM1LMAcFntTGpqTQqwXHj9AVwo/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Show Comments: <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/AVvXsEiQnDQTP5dp2nhWCNVtQhfspugeNZgHrSf2PTziIJHOA4JsUiV1TpN0RL81pAZM69u2gnvA7esR3SLK5auRCz9jyUWuWIG9i9knavTAR8JPArHp-90Ks9qyo41jDY9T9QFoMwZdqgfLPdFQ/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/AVvXsEjrsPxarLFju3W19lY0XkjOfMvTol5HdXxS_iWHWZ6MUvXhQZY0ULM9dhmF8qcStOrlN9HEm6Z6qbL2kgvA8Wcc6lIBHnnMRB_ebK4Dhz-6Qvusc22GPDr-puIteYp_iFYGkG9JA2BjJfNF/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
</b:if>
Note: The
data-width is for setting the width of the comment box, so the number (550) indicated there can be changed according to the design of your blog.
To make it works, your blog must have a jQuery plugin installed otherwise it won't be work. If your blog don't have a jQuery plugin, Add below line just above
</head> tag.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
Finally save template and you're done !
Also see : How to Add Smileys & Emoticons inside Blogger Comments