Cara Menampilkan Komentar Blogger dan Google Plus Secara Bersamaan (Toggle System)

Menampilkan sistem komenter Blogger dengan Google Plus (g+) secara bersamaan atau dengan sistem toggle akan memberikan pilihan yang baik kepada pengunjung blog. Secara default, komentar awal yang ditampilkan setelah halaman blog terbuka secara sempurnya adalah komentar blogger, dan untuk memunculkan komentar google plus, maka pengunjung tinggal mengklik icon google plus (berwarna abu-abu) yang ada di samping kanan icon blogger.

Sekarang untuk menampilkan 2 (dua) sistem komentar ini secara bersamaan di blog blogger, posting kali ini akan menjelaskan Bagaimana Cara Menampilkan Komentar Blogger dan Google+ dengan Sistem Toggle Secara Bersamaan. Berikut tutorialnya !

Note! Baca Juga Artikel Tentang :

Untuk mengaktifkan komentar google plus pada blogger, silahkan baca artikel tentang Bagaimana Cara Mengaktifkan Komentar Google Plus di Blogger

Atau

Apabila anda mengalami masalah dalm hal memunculkannya, silahkan baca artikel Mengatasi Masalah Komentar Google Plus (G+) yang Tidak Bisa Muncul di Blogger

Cara Menggabungkan Sistem Komenter Blogger dan Google Plus

Langkah # 1: Hal pertama yang perlu Anda lakukan adalah untuk membackup template Anda. Setelah login, di dashboard blogger klik Template » Edit HTML. Sekarang cari kode berikut. (Quick Tip: Klik di manapun pada editor HTML dan Tekan CTRL + F untuk mengaktifkan kotak pencarian).

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

Langkah # 2: Setelah menemukan kode tersebut di atas, ganti seluruhnya dengan kode berikut. (Ingat: Pastikan bahwa tag ditutup dengan benar jika tidak, anda akan menghadapi kesalahan). 

<b:includable id='threaded_comments' var='post'>
  <div id='com-header'>
<h6>Berkomentar Dengan </h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEice4UapPb_3SSkQ0TqFv21mHfkDHEcQ72DPonx1vrGOKIxw8uFWyuYs6-As0J4y-6mCTZrCnVnov-QivBTqLvrK_s1kY2kUspDa9aJQDp8aVa3EhNKnqCPcLELoAtvzGlA1szxnQlrHgyT/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>Atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHNgYDE8QSvim12aA1gv0HyJauSwNAAdMOt-BZ1dewFj1QO9F8ZXkyfnKHIUNxRGBFk39Z1HDDHdRIi5cPt6psWJoGmUglbXVQNXZp4RkIsykHuJ-mwgObLUSKJS5-V2WGSIQcQgPgap3/s1600/Google-plus-comments-off' title='Tampilkan Komentar Google+'/><h6>Silahkan Tentukan Pilihanmu!</h6>
</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 type='text/javascript' src='http://yourjavascript.com/21161566133/lost-sector-net-blogger-google-plus-toggle.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: 615px;
margin: 5px;
background: #f5f5f5;
  }
#com-header h6{
font-size: 15px;
text-transform: none;
font-weight: bold;
text-align: center;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
</style>
</div>
</b:includable>

Langkah # 3: Sekali lagi dengan bantuan kotak pencarian cari kode berikut.

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

Langkah # 4: Setelah menemukan kode seperti di atas, ganti semuanya dengan kode berikut. (Ingat: Cobalah untuk menutup tag dengan benar, sehingga template tidak mendeteksi adanya kesalahan). 

<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>
 <div style='clear:both;'/>
</b:includable>

Langkah # 5: Setelah menerapkan instruksi yang disebutkan di atas, sekarang tekan tombol "Simpan Template" yang terletak di bagian atas layar Anda.

Sumber Kode CSS & HTML : www.mybloggerlab.com