Tutorial Put Blogger and Google + Comment Together

Misaki PureBlood | Friday, February 21, 2014 | | | | | |


Okie, I'm going to sleep after I write this tutorial XDD I'm so darn tired TT^TT.. My eyes need some rest LOL XDD..

Actually I love to use Google + comment rather than Blogger comment... Since, some of my friend blogger still not use of Google + system and some of them cannot comment because they didn't use Google plus account to reply.. Most of them still using blogger account without combining with Google Plus like I did XDD..

So, I don't want to make things look unfair XDD ahaha... Thanks God, I found the solution how to put both Blogger comment and Google + comment. So, blogger can choose which comment they gonna use.. How it will look like: (you can see it at my comment box)




O.k let's start the tutorial XDD hehe..

1. Go to Dashboard > Template > Edit HTML > CTRL + F

2. Find this code:
<b:includable id='threaded_comments' var='post'>...</b:includable>
3. Copy this code and replace it with code that you find at no. 2:
 <b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img id='comments-norm' class='comment-on' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments' /><img src='http://lh4.googleusercontent.com/-TZUsaFaiAJM/UXVi6qJ1vjI/AAAAAAAAILk/GDdUhxz_51I/s50/bubbles.png' /><image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments' />
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '750',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
// switch to normal comments displaying
$('#gcontainer').css('display','none');
$('#comments').css('display','block');
$('#comments-norm').addClass('comment-on');
$('#comments-gplus').removeClass('comment-on');
$('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');
$('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
// switch to google plus comments displaying
$('#comments').css('display','none');
$('#gcontainer').css('display','block');
$('#comments-norm').removeClass('comment-on');
$('#comments-gplus').addClass('comment-on');
$('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');
$('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');
});
$('#comments-norm').hover(
// switch to normal comments displaying
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
// switch to gplus comments displaying
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');}
}
);
</script>
<style>
#comment-zone {
position: relative;
}
#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
}
</style>
</div>
</b:includable>
4. Find this code:
<b:includable id='comment_picker' var='post'>...</b:includable> 
5.  Copy this code and replace it with code that you find at no. 4:
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
6. Preview first and Save if code work well.

7. In case blogger comment and Google + comment not appear together, please find this code:
</head> 
8. Paste this code above </head> code:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
9. Preview first and Save if code work well.

NOTE: Please go to dashboard > Google + | and please untick the Google+comments



Now you can comment use both blogger comment and Google +  comment XDD
Credit to: David Kutcher who invent this tuto~
and to Akmal Halim XDD

2 comments:

  1. Nice tutorial dear. :D Insyaallah kalau dah pakai google+ boleh guna tuto ni ^_^

    ReplyDelete
    Replies
    1. hehe.. ^__^ kan3 XDD
      nanti dah pakai guna nih snang skit XD hehe

      Delete