Add Blogger And Google+ Show/Hide Comment Box

We all know Google+ provides us the biggest circle around the world to share our content and stay connected to it in future. But sometimes it takes readers to trouble as commenting through Google+ they will have to make a Google+ profile. In this way Blog readers are forced to create Google+ profile, but in this tutorial we will show you how you can add Google+ comment box along with blogger comment box below each post. This widget enables users to let have a choice to put their comment. If they want to comment through Google+ they can simply click on Google+ comment section & if they want to comment simply through they can use blogger comment section. Overall this widget shows Toggle effect hence have a pretty look. Let's start making it.

For making it easiest than easier we used inline JQuery & CSS, but if you wanted to change it. You can change it later. These are Four easy steps for creating such widget.

STEP 1. Go to your blogger Dashboard & Select your blog> then Navigate to template > now click on Edit HTML button on right to Customize (See Screenshot below)

STEP 2. When you see whole coding on your screen, click anywhere on coding & press ctrl+F on your keyboard to open a search box. Write below code in search box & hit enter.

Here is code>>>

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

STEP 3.Just after <b:include data='post' name='post'/> add below written code.

Here is code>>>

<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/AVvXsEjbU-CDFEOBbEQtOdWN5Zkcjm6clhv2dg57v2s8kQh1lfpn4uRFjazgJnwKxzBUKZ0SgjM4xa841DHfaEgv4_bdwTKVaW29Bsw0qUjSwnURJII7ub3sBcw8nUSlP5gmRmJpWNbciHJxEaTb/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/AVvXsEhSksylH18FbPrad7byKRr1DB6SdAU7oZuvS0awP-O92DeXYyZqWabz0kzgg1RlXAKYmxjGjpPUfAGTDiT6dn9CC7H3j1nHkSurAj5_tezDCUL6E5Q5pMsI0pSBb2Rtj3wmery-H30ZX-EU/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/AVvXsEg-dvgyeuwhTXcDptInAu5Lr-Odo8mVvlybtL5vIqAXJPXYAnNgtOcIMs867LQT96rSWQATbboqcNvtxrMWX8yUajZHM24VpngPyqf11aKVD1jzJCqenXIESdRcVrYV7rgfVK_McTMn9cMy/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> 

* You can change data-width with your need. Depends on the width of your main wrapper.

STEP 4. Now, last step that you always do. Just click on Save Template. When you are done you will see comment box embedded on your blog.

Important>>> To make this widget work 100%, you just make sure that you are using a version of JQuery in your blog. If it is not, just add below code before </body> tag in your Template Edit section.

Here is code>>>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

After all done you will see like this in your blog/site.