Add Blogger and Google+ Comments System With Toggle

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

Comments: 11
data:blog.title
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='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' 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;'>
<style>
#comments{display:none;}
.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;}
</style>
<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='http://1.bp.blogspot.com/-iA-9vVgP7lc/VJpos8BvBuI/AAAAAAAAIso/pShY6L8fApY/s1600/BloggerSpice%2BGooglePlus.png' 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='http://4.bp.blogspot.com/-qIeksxJDzSg/VJpos_YOdTI/AAAAAAAAIsk/J9r1rwt5jlQ/s1600/BloggerSpice%2BBlogger.png' width='50'/></a>
</div>
<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'/>
</div>  
</b:if>

Step 7 Now hit the Save template button.

Customization

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


comments

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

Ola Ryden says: 4/16/2015

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??

Mohammad Fazle Rabbi says: 4/17/2015

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.

Ola Ryden says: 4/22/2015

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

Abhishek Suneri says: 6/21/2015

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

Mohammad Fazle Rabbi says: 6/21/2015

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.

Abdul Kadir says: 7/05/2015

very good , i make so many widget from bloggerpice to my blog www.bondua.com

Mohammad Fazle Rabbi says: 7/05/2015

Thanks bro.

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.

Mohammad Fazle Rabbi says: 11/03/2016

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.

Adarsh Rawat says: 6/09/2018

how to add comment box like this you added on this page

Blogger Spice says: ADMIN 6/10/2018

Hi Adarsh Rawat,
I am using Blogger's default comment box. :go

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

Name

Email *

Message *