Show/Hide Blogger Together With Google+ Comments Organization Alongside Toggle
Thursday, January 28, 2016
Edit
Many Blogger site owners received the novel Google+ Comment System pretty negatively because it forced all commenting users to exercise their ain Google+ concern human relationship earlier they were able to write a comment. The Google+ Comment System on Blogger was convenient to writers, but discouraged many users from continuing to comment on blogs because they only didn't desire to purpose Google+. For those that did purpose Google+ to brand a comment, Blogger would never e-mail y'all as well as notify y'all that individual left a comment; y'all could instruct days or weeks without e'er realizing that y'all never responded to a reader.
In improver to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your spider web log post. By changing your URLs or moving unopen to your spider web log posts internally, y'all run the adventure of losing every ane of your comments that was placed using Google+.
Previously, the solely agency to solve this work was to disable the comment organization through your concern human relationship settings, hence giving upwardly your might to purpose their Google+ account. Now, there's an slow novel agency to direct maintain the best of both worlds. Allowing fans of Google+ as good as everyday spider web log readers to access all same features, you’ll hold upwardly able to engage every visitor equally. You tin answer to comments acre all the same beingness able to communicate alongside other Google+ users exterior of your site as well as direct maintain wages of the Google+ Comment System on Blogger.
Step 1. Log into your Blogger concern human relationship as well as pick out your spider web log > instruct to 'Template' as well as press the 'Edit HTML' push clit on the correct side.
Step 2. Click anywhere within the code expanse as well as press CTRL + F keys to opened upwardly the editor's search box as well as search for the next code:
Note: data-width is for setting the width of the comment box, as well as so the pose out (550) indicated at that spot tin hold upwardly changed according to the blueprint of your blog.
Step 4. Press the "Save Template" push clit located at the exceed of the editor as well as stance your spider web log to run across if y'all direct maintain successfully added Google+ commenting organization to Blogger.
Please banker's complaint that inwards guild to brand this work, y'all involve to brand certain that y'all are using a version of jQuery inwards your site. Otherwise, add together this occupation exactly inwards a higher house the </head> tag using the HTML template editor:
In improver to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your spider web log post. By changing your URLs or moving unopen to your spider web log posts internally, y'all run the adventure of losing every ane of your comments that was placed using Google+.
Previously, the solely agency to solve this work was to disable the comment organization through your concern human relationship settings, hence giving upwardly your might to purpose their Google+ account. Now, there's an slow novel agency to direct maintain the best of both worlds. Allowing fans of Google+ as good as everyday spider web log readers to access all same features, you’ll hold upwardly able to engage every visitor equally. You tin answer to comments acre all the same beingness able to communicate alongside other Google+ users exterior of your site as well as direct maintain wages of the Google+ Comment System on Blogger.
How to Integrate Blogger as well as Google Plus Comments
To brand the installation as elementary as possible, I used inline jQuery as well as CSS, but who wants tin alter this code later. Also, the nearly accessible house I flora to add together it would hold upwardly exactly after <b:include data='post' name='post'/>. So, let's start adding it:Step 1. Log into your Blogger concern human relationship as well as pick out your spider web log > instruct to 'Template' as well as press the 'Edit HTML' push clit on the correct side.
Step 2. Click anywhere within the code expanse as well as press CTRL + F keys to opened upwardly the editor's search box as well as search for the next code:
<b:include data='post' name='post'/>Step 3. Just after <b:include data='post' name='post'/> add together the next code:
<b:if cond='data:blog.pageType == "item"'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6B03Pamm_tV_snjf11S6h9qaa3mCCDOhnLEK6JP0B38r7S4OI7gF-L_5pPsHNHyyNwDj1DAd4DYV9ouIuKNzW3tm_vEEK-zvl5I-khyphenhyphenyjSmwj6FXBOC8sVvd9z0PrVnEWxSzz16q0d98M/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",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='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEialJE3-_DKszFKwx4Y_9iF5cU3rF1I_2uIq7xI0IT6t18fjtfxULN0ihnile_g6gnwBgfONmNG4d1DyN3uQbF1xHI88Y90SdZkUvr14Mk0Mj9mRC6mJzP0mJVfprfpT6LTbllj-ULHqEUD/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTruXqMnRLLqtqreB8YLCih0Ay1nGzUnRvDgB6HjPqUh9R6hpBJshyphenhyphenrKmGVVQd69nPpXx-4_Dgi-ZE0wgA_HeybJ4YFCfYRhnmg6mafKwe-7TkD30Cj6X9IEDBnEeA2oSMvkWnMMsP89Ws/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>
Note: data-width is for setting the width of the comment box, as well as so the pose out (550) indicated at that spot tin hold upwardly changed according to the blueprint of your blog.
Step 4. Press the "Save Template" push clit located at the exceed of the editor as well as stance your spider web log to run across if y'all direct maintain successfully added Google+ commenting organization to Blogger.
Please banker's complaint that inwards guild to brand this work, y'all involve to brand certain that y'all are using a version of jQuery inwards your site. Otherwise, add together this occupation exactly inwards a higher house 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'/>