Add Blogger and Google+ Comments System With Toggle

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

Comments: 9
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.

Speak Your Mind

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

Anonymous 11/02/2016

Some error in Step 6. The code is not showing properly after "Comment With: .....". The image link and coding of google+ and blogger are showing as blank image instead of the coding.

Hi there, Can you try the script in other template or in Blogger default template? I think for custom script in your template this widget is not working.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *