Sunday, 21 December 2014

Blogger and Google+ Comments System With Toggle

Posted By: Sifiso Nkwanyana - 03:33


& Comment

Blogger and Google+ Comments System With Toggle
When the google+ commenting system was not a successful since it restricted many blog visitors from commenting to their desired blogger blog resulting to bloggers having the ability to choose the commenting system that they require for their blogs, I have decided to Share this awesome commenting system for blogger which will include both Blogger and Google plus comments separated by a toggle. this widget is the best ever widget that any blogger would like to post as it is the first ever widget that will enable both Blogger and Google plus comments in one blog.

The most negative thing about using the Google plus commenting system was that it was very less responsive to the blogger and the worst thing about this type of commenting system was that it was dependant to the blog domain and they will automatically delete when you change the blog domain meaning that your readers comments were not secure.

This blogger and google plus commenting system can work for you both in google plus and on blogger


How to  install Blogger and Google+ commenting system

  • Step 1
Log into your blogger dashboard, go to template and select edit html which will open the HTML code of your template.

  • Step 2
Once you in the template HTML code left click anywhere on the code and the press CTRL+ F on the left to open the editors search box which will appear as show on the image below.

  • Step 3

Copy and paste the below to the search box  and press ENTER to search

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

  • Step 4
paste  the code below just after  <b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url( no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,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='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='' width='35'/></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='35' src='' width='35'/></a>
<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'/>

  • Step 5
Save your template and check it out

NB :
The width setting of this widget is 550  but you can adjust it to the way it suits your blog , to some blogs the widget may not work because some blog templates  are not updated to using a version of jQuery  then I would  motivate that they update their templates by adding the code just above the  </head> tag using the HTML template editor

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


This trick is the best trick you can try for your blogger blog as it has the ability of increasing your blog readers flexibility. allowing them to comment in both google+ and blogger.

About Sifiso Nkwanyana

Sifiso Nkwanyana is a full-time blogger and Forex trader who loves to explore blogging. He has a passion for helping newcomer bloggers make their blog noticeable and make money. The Main Purpose of this site is to bring reality with a taste of entertainment


  1. nice I got it on my blog , thnx

  2. Thanks it worked out!.....but why are u not using it LOL

    1. Yes it works very well, I tested it on my Demo Blog.


Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep it in mind that we respect all comments by our readers but all spam comments and spam links will be deleted. Thanks for understanding!

Copyright © 2013 Ajaxsurf™ is a registered trademark.