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



Preview

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUncIq2DD3yIoUFJ512pbiHWD_X482QRmQldEkTqQr-D_ZFKOmCxlWpkaikUWBkdaQkpi4vDS-9_L0ZdDnMlu5krNa3g1vzpsx0mvtFS3UavUZKwdWCIBC6wEOQMlnwHe9rJam31J9O_j/s1600/speech-bubble.png) 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSS4ro720zmUBHBFFVmusaeC2DOUVJyuDcIL0ufImmG86ElUYoRVlOfoaeNsyWrBl-6Brdj24ajKHPwh12WLxtjRRABL4WuNH25BCA9T4gJ2TaZqBpWyuylqt2k2TENs7lZAH8osCcLz1b/s1600/google-plus-logo.png' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEpOOrKz8Jn3jevBaaJ_j2XhyphenhyphencaAe9wvZ1NCyx2M-1MN7FP50EMWhvsg2UG5DJH8Dt1LUrtOd0M8irLRVwui7eO7uGV0-F1X09FicAfJNWz0zd8NyE-f_Gj7FrQ0Bp9Qu4SzC6Vi1G1RFy/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>

• 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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Conclusion

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.