Add Blogger and Google+ Comments System With Toggle

How to show and hide Blogger and Google+ Comments System Together With Toggle

Toggle comment

Blogger containing 2 types of commenting system such as Blogger comment  and Google plus comment. By default if you create a blog then you might see Blogger default comments only. But for using Google plus comment you must switch your Blogger default comment system to Google plus comment system. However you can use both commenting system by tweaking. But previous many developer has released highly coded commenting system to show and hide Blogger and Google+ Comments System Together With Toggle. But in  this tutorial I will show you that how easily we can add both usable Blogger and Google+ Comments System Together With Toggle option.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code <head>  by pressing Ctrl+F 

Step 4 Paste the below code  below/after <head>

<script src='' type='text/javascript'></script>

Step 5 Now again Find below code by pressing Ctrl+F

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

Step 6 Paste the below code below/after above code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.BloggerSpicecomments-potobhumi {background:#FFFFFF;text-transform:uppercase;font:normal normal 30px Oswald,'Bebas Neue',Bebas,'Arial Narrow',Sans-Serif; color: #555; font-weight:bold; padding: 18px 15px 0; height: 70px; }
.comments-icons a img {vertical-align: middle;}
<div class='BloggerSpicecomments-potobhumi'>
Comment With: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='40' src='' width='50'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='40' src='' width='50'/></a>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='560' expr:data-href='data:post.url'/>

Step 7 Now hit the Save template button.


  • To Increase or decrease the comment box width change the value 560.


Congratulation you have successfully added the Blogger and Google+ Comments System Together With Toggle. By default Google plus comment will display after landing on Post page. And you can click on Blogger icon to view the default comment system. Again you can return on Google Plus commenting system by clicking on Google+ comment icon. It's just like toggle. Hope your blog visitors will feel more comfortable than before to make comment on your blog. If you have any query regarding this then feel free to write me. Thanks.
Add Blogger and Google+ Comments System With Toggle
4 Stars stars - "Add Blogger and Google+ Comments System With Toggle" Blogger containing 2 types of commenting system such as Blogger comment  and Google plus comme...

Post a Comment

Hello! I have problem with this gaget. In my test blog it works perfect, but in my public blog it not works. I have disabled Google+ comments first but its not works anyway. What can i do??

Hi Ryden..IN tutorial Step 4 you will see a JavaScript file, If your template already containing this JavaScript file or any upgrade version of this JavaScript file then don't add paste the JavaScript code again. Due to multiple JavaScript file it conflicts with each other. So skip the step 4. I hope it will work now. Thanks.

Yes!!!! Now the problem is solved. It works. Thanks!

hi, It is amazing work you have done. bravo!!!!. Can we intergate Facebook comment box also in this toggle? If we can please help me to figure out how. Thanks for your code

Hi Abhishek, Thanks for dropping your comment. Facebook has recently updated their Graphical API. And 23rd June 2015 we will get stable version of latest plugins. So After that I will write tutorial about Blogger and Facebook toggle comment box. Until than stay tunes.

very good , i make so many widget from bloggerpice to my blog

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *