Membuat Komentar Blogger dan Google Plus Berdampingan

Tweet

Membuat Komentar Blogger dan Google Plus Berdampingan di Blog - Seperti pada tutorial sebelumnya yaitu mengenai cara mengaktifkan komentar G+ di blog kali ini kita akan berbicara cara membuat komentar G+ berdampingan dengan komentar blogger.

Nahh fitur ini akan bekerja apabila pengunjung menginginkan berkomentar dengan blogger maka bisa langsung berkomentar, sedangkan apabila calon komentator menginginkan berkomentar dengan G+ maka akan tersedia tombol untuk menaktifkan fitur G+.

Cara Membuat Komentar Blogger dan Google Plus Berdampingan :

1. Buka akun blogger Anda
2. Back Up terlebih dahulu template Anda agar tidak ada hal buruk yang terjadi dalam kesalahan Anda.
3. Masuk ke menu edit HTML, cari kode yang mirip dengan kode dibawah ini :

<b:includable id='threaded_comments' var='post'>
.
.
ISI KODE
.
.
</b:includable>

     4.  Maka ganti kode diatas dengan kode dibawah ini (beserta isinya) :

<b:includable id='threaded_comments' var='post'>
  <div id='com-header'>
<h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEholYkSj16RdhaT6VYKco7efR8U-lcosoVctIcuYwb6ahkrAK2klQ2leVK8fmyuiJ_3wTsWymxMRpJeUBenxSJPRM_AoWAtA7OaQ2uG2z_-ZE0eunCmZFKTK9RFJIqS4mD6epSCLp8Lck4H/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHPcCJpuHdPsjf0uDejSEau7pO-c11vRYaUnCD_vvMIoUguO7zi45-csszunWtpc2YAHXPoRE2H3rI0WEJiyOb1JtopC3IcW4b9Jo9IDSlZvT9MuvJIPehy9P7Yxg-GNLOVASVuNYuwYe/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsmbl'><a href='http://www.mybloggerlab.com/2013/04/ow-to-use-blogger-and-google-comments-together.html' id="mblrights">Get This Widget</a></div>
</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 src='https://mybloggerlab.googlecode.com/files/mblgbcom.js'/>
<style>
#gcontainer {
display:none;
  }
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
  }
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 580px;
margin-bottom: 20px;
background: #f5f5f5;
  }
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
#copyrigtsmbl {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
font-size:11px;
background: #fff;
  }
#copyrigtsmbl a {
text-decoration:none;
color:111!important;
  }
</style>
</div>
</b:includable>

   5.  Lalu cari lagi kode dibawah ini 

<b:includable id='comment_picker' var='post'>
.
.
ISI KODE
.
.
</b:includable>

   6.  Maka ganti kode diatas dengan kode dibawah ini (beserta dengan isinya)

<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>

    7.  Save template Anda.

Maka, demikianlah artikel Membuat Komentar Blogger dan Google Plus Berdampingan semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.