Add Google+ and Blogger Comments System on Blogger

Google plus+ is a marketplace for entrepreneurs as well as for beginners to promote their content and products. Google plus+ comment syst...

Google plus+ is a marketplace for entrepreneurs as well as for beginners to promote their content and products. Google plus+ comment system for blogger is a big trend nowadays because it plays a good role on the backlink, but it has one problem that you can't recognize that who give a comment it don’t have any moderation system from which you got every comment notification directly on your blog dashboard. After several months some professional webmaster hack this widget code and made him blogger friendly in which you have both system blogger and google plus, it creates sounds interesting! Among blogospheres and got a high peak in widget styles now every new and product seller sites used this amazing widget which also helps in increasing user conversations.

Previous Article: HTML5 Image Hover Effects (image rollover by mouse).

Benefits of Multiple Comment System

• The first and main benefit that you can promote your blog post on Google plus, from this you have a chance to get more circles and followers.
• It increases your blog backlinks which is a good factor for increase google page rank.
• It didn’t eat your blog page speed, it is SEO friendly.
• It is fully responsive and safe.

How to Install Google + and Blogger Comments System

Before starting make sure that you have a new script of Jquery, if you don’t have a new Jquery script so add the below code before </head>.

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

 Now go to blog dashboard and click on the template.

Click on Edit HTML>> click on any code and press CTRL+F.

Search the below code.

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

Then, paste the below following codes 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(http://2.bp.blogspot.com/--CsmnKc1FSA/VI8FyLYdw7I/AAAAAAAAAwE/erSHV85Pg_Q/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='http://1.bp.blogspot.com/-i1zpfechOuY/VI763hqxlHI/AAAAAAAAAvs/dz4sWUQW-xU/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='http://3.bp.blogspot.com/-4N-YlJvoxdA/VI763udxlHI/AAAAAAAAAvw/0dY2Ys0zz2k/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>

Remember: The data-width code is for the comment box size, and if you want to resize the comment box so change this number 550 which was written after the data-width with your custom size.

Ultimately click on Save template and check it after below post.

From this you can give a comment yourself it doesn’t be spam on Google plus Comment system, so this tutorial will helps you a lot in the sense of backlinks and it's a guarantee that your every reader gives comment freely and ask fully. If you like it, so kindly share this post with your friends and circles.