How To Install Blogger And Google Plus Comment System On Blogger/Blog

Few days ago Blogger recently enforced Google plus comments on their Blogger platform, It allow readers (visitors) to comment on your blog with Google account. There are few new feature in the comment system, that is you can mention your Google+ friends on the comment, You can comment the blog post via Google+, no redirect after commenting while the default have redirect after publish a comment and more customizable, easy delete. With this blog you can see the combination of both Blogger and Google + comment system try to look at below this articles.  Once you’ve enabled this two feature through your Blogger Dashboard, you’ll get pleasure from a number of necessary benefits. Today, during this article, we are going to show you the way to add the combination of Blogger and Google+ Commenting System in Blogger/blog.

How to Add Blogger and Google+ Comments System in Blogger?

• Click on the Template tab from the left sidebar, and then click on Edit HTML.
• From the code editor, press Ctrl + F, and search for the following line of code

<b:includable id='nextprev'>

• Immediate after this line, add the following code.

<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render(&#39;gcomments&#39;, {
    href: window.location,
    width: &#39;570&#39;,
    first_party_property: &#39;BLOGGER&#39;,
    view_type: &#39;FILTERED_POSTMOD&#39;
});
$(&#39;#comments-norm&#39;).click(function(){
// switch to normal comments displaying
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDRc876LPUAzzas8TrySn5oXZ4yC9qPUwMLqlJprPG8WaBvTgxpTCmReSNuXuug0aD4zTkJ4sJFZD2Vo076KaTv45xMGqvJdaTAvy2Feo-gmknbLW5O6nJ4gbXtv8UhSonSSGUhGY-SZlM/s50/blogger_on.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkbsBjLe7a491gWvuUEdObrj1PSNM5c2iBP96X47mqVS3sLlzbn4QtiO1Kq4eNnX0Y6NR8VehipfK1qJ4yaNkzdcTdsXgZNCVrSlt2Xure1AJPLYz4XTRUpik6HLxhkAIunnr4L8OgOBi/s50/plus_off.png&#39;);
});
$(&#39;#comments-gplus&#39;).click(function(){
// switch to google plus comments displaying
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9Ipv4oZHF7IyPAGKTokJ1xUbUjgZgCE_9WbnbK6D_GCxmKk7-PxTXdA4CU68W-xL3Zojmcxhpf8FQwCaDYG8DlXvXEFXAczEJ9E6MokbLUsmGA4uzUAPxUpNm0vo4xv7fN7crdAzWany/s50/blogger_off.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkL4ASmVOwHX3xYRRHd5_KDb6Ke4qae3RISCkq4eKibZpFDU56Z62UdwK642h6pxLYDPn3iTIBdogpIpzJUwPtx6ampo7bWpj9bEEq6yW8x_kS7hamexJ6MWdlnz4IaLi2kvwX361gO6z/s50/plus_on.png&#39;);
});
$(&#39;#comments-norm&#39;).hover(
// switch to normal comments displaying
function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDRc876LPUAzzas8TrySn5oXZ4yC9qPUwMLqlJprPG8WaBvTgxpTCmReSNuXuug0aD4zTkJ4sJFZD2Vo076KaTv45xMGqvJdaTAvy2Feo-gmknbLW5O6nJ4gbXtv8UhSonSSGUhGY-SZlM/s50/blogger_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9Ipv4oZHF7IyPAGKTokJ1xUbUjgZgCE_9WbnbK6D_GCxmKk7-PxTXdA4CU68W-xL3Zojmcxhpf8FQwCaDYG8DlXvXEFXAczEJ9E6MokbLUsmGA4uzUAPxUpNm0vo4xv7fN7crdAzWany/s50/blogger_off.png&#39;);}
}
);
$(&#39;#comments-gplus&#39;).hover(
// switch to gplus comments displaying
function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkL4ASmVOwHX3xYRRHd5_KDb6Ke4qae3RISCkq4eKibZpFDU56Z62UdwK642h6pxLYDPn3iTIBdogpIpzJUwPtx6ampo7bWpj9bEEq6yW8x_kS7hamexJ6MWdlnz4IaLi2kvwX361gO6z/s50/plus_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkbsBjLe7a491gWvuUEdObrj1PSNM5c2iBP96X47mqVS3sLlzbn4QtiO1Kq4eNnX0Y6NR8VehipfK1qJ4yaNkzdcTdsXgZNCVrSlt2Xure1AJPLYz4XTRUpik6HLxhkAIunnr4L8OgOBi/s50/plus_off.png&#39;);}
}
);
</script>
<style>

#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
    float: left;
}

  #comment-header {
padding-left: 10px;
float: left;
width: 595px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
margin-left: 25px;
padding-bottom: 5px;
margin-right: 25px;
}

  #gcontainer {
margin-left: 40px;
    margin-top:20px;
    float: left;
}

</style>

Now Proceed To Step 2

• From the code editor, press Ctrl + F, and search for the following CSS code

]]></b:skin>

• Paste below code before above code

/*****************************************
Bloggerheroe.com Blogger and G+ Comment System
******************************************/
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
float: left;
}
#comment-header {
padding-left: 10px;
float: left;
width: 595px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
margin-left: 25px;
padding-bottom: 5px;
margin-right: 25px;
}
#gcontainer {
margin-left: 40px;
margin-top:20px;
float: left;
}
.commentwith h5 {
text-transform: uppercase;
font-family: 'Oswald', Arial, Helvetica, sans-serif;
font-size: 24px;
color:#1BA1E2;
font-weight: normal;
line-height: 25px;
margin-bottom: 35px;
float: left;
margin: 15px;
}

Step 3

• Search this code <div class='post-footer-line post-footer-line-1'> in your blogs HTML
• Copy above HTML code and paste just after <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='comment-header'>
   <div class='commentwith'><h5><b> Comment Using:</b></h5></div>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDRc876LPUAzzas8TrySn5oXZ4yC9qPUwMLqlJprPG8WaBvTgxpTCmReSNuXuug0aD4zTkJ4sJFZD2Vo076KaTv45xMGqvJdaTAvy2Feo-gmknbLW5O6nJ4gbXtv8UhSonSSGUhGY-SZlM/s50/blogger_on.png' title='view Blogger comments'/>
   <div class='commentwith'><h5><b>OR</b></h5></div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCkbsBjLe7a491gWvuUEdObrj1PSNM5c2iBP96X47mqVS3sLlzbn4QtiO1Kq4eNnX0Y6NR8VehipfK1qJ4yaNkzdcTdsXgZNCVrSlt2Xure1AJPLYz4XTRUpik6HLxhkAIunnr4L8OgOBi/s50/plus_off.png' title='view Google+ comments'/>
   <div class='commentwith'><h5><b>Happy Reading!!</b></h5></div>
</div>
              </b:if>

• Hit save and your done.
• If you have any doubts or problem adding this code please leave your comments below.

Share it Please

Tweet