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 !

toggle system blogger and google plus bersamaan
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

Unknown
Unknown

37 comments:
Write comment
  1. wah rumit juga sob

    ReplyDelete
    Replies
    1. Ini sama sekali gak rumit om, karena yg diganti cuman 2 kode doang, dan tentunya dengan HTML editor terbaru sekarang akan sangat memudahkan dalam penggantian kode !

      Delete
  2. Nice post ka :)
    Trus itu yg TAB G+ :
    Gunakan Google+ Komentar di blog ini
    ituu dicawang (aktifkan) tow jangan ka??

    ReplyDelete
    Replies
    1. Gak usah, karena script yg ada di atas secara otomatis akan mengaktifkannya.

      Delete
  3. Tutorialnya boleh juga nih, sepertinya lebih menarik kalau langsung dicoba. :D

    ReplyDelete
    Replies
    1. Silahkan mas, mau di jadiin sebagai konten pusaka juga bisa...
      Hehehe, becanda mas ! :D

      Delete
  4. Tutorialnya sangat membantu dan berguna sekali sobat, saya ijin save dulu sobat, terima kasih sudah berbagi

    ReplyDelete
  5. mantap nich. pengen coba gan

    ReplyDelete
  6. AnonymousMay 19, 2013

    Ga bisa jadi toggle system mas?

    kira2 knp ya?

    ReplyDelete
    Replies
    1. AnonymousMay 19, 2013

      Maaf mas, ternyata sukses ada kendala tadi dikit

      Delete
  7. Salam,saya mencoba memasang tutor ini,namun tidak bisa muncul untuk koment G+plusnya saat di Klik Mohon Informasinya Gan! Terimakasih!

    ReplyDelete
    Replies
    1. Masalahnya kemungkinan besar karena template mas tidak didukung oleh komentar google+. Untuk mengaktifkannya, silahkan baca tutorial : Mengatasi Masalah Komentar Google Plus (G+) yang Tidak Bisa Muncul di Blogger

      Delete
  8. maaf gan,, untuk blog saya belum berhasil,,

    ReplyDelete
  9. wah bagus nih kode-kodenya dah pada diedit dari kode asalnya. Tapi kenapa masih pakai hosting luar (yourjavascript.com)? kan bisa pakai google site. Biar lebih cepet loadingnya gitu. Cuma masukan kok :)

    ReplyDelete
    Replies
    1. Takut kena banned gan, klo dah kena banned harus upload lagi. Jadi mending pake hosting luar.

      Delete
    2. sob mau tanya sekali lagi nih, kalo yang default pertamanya google+ caranya gemana? Kan klo di kode itu defaultnya blogger, sekarang kalo dibalik, bisa gak kira-kira?

      Delete
    3. Coba baca artikel di atas, tepatnya di bagian Note! "Baca Juga Artikel Tentang". Baca salah satu atau keduanya, mungkin bisa membantu.

      Delete
  10. info yang bermanfaat gan, tapi kalo harus 2 comment mah beratin loading blog

    ReplyDelete
  11. mas...kalau permasalahnya di static page aja yang nggak bisa muncul gimana ya??

    ReplyDelete
    Replies
    1. Biasanya ada beberapa tag conditional yang membungkus kode tersebut dan umumnya kode pembungkusnya adalah seperti ini :

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      .
      .
      .
      .
      </b:if>

      Jadi untuk memunculkannya di halaman statis, di bawah pada baris pertama di atas silahkan tambahkan kode ini :

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

      dan paling bawah tambahkan juga kode :

      </b:if>

      Jadi kalo digabung maka akan jadi seperti ini.

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:includable id='comment_picker' var='post'>
      .
      .
      .
      .
      </b:includable>
      </b:if>
      </b:if>

      Delete
  12. aku udah pernah coba beberapa cara tapi tetep gak muncul.. cara ini belum di coba, ijin bookmark dulu :) .

    ReplyDelete
  13. kok di blog ane g bisa ya gan mohon pencerahannya
    http://and-zone.blogspot.com

    ReplyDelete
  14. gan code scrip ertama yang d cari gada?

    ReplyDelete
  15. boleh jga nih tuto nya , udah lma nisa cari2 tuto nihh , :D

    ReplyDelete
    Replies
    1. oh iyahh ,, udah di coba , trus di simpan , mw kembli kok ada psan nya kek gini "anda belum menyimpan,dan akan hilang" pdahal uda di simpan , sring kali sperti itu !!
      mohon pencerahan nya mas ??

      Delete
    2. ini email saya mas : khoirunnnisa66@ymail.com .. minta tolong yah mas . heeh

      Delete
  16. kow saya pusing yang lihatnya!
    http://anrhy.blogspot.com/

    ReplyDelete
  17. keren gan. tapi blog ane masih tersembunyi coment pengunjungnya, malah yang ada masuk ke gmail hehehe

    ReplyDelete
  18. Cara yang ampuh untuk menghancurkan wasir peyakit ambeien tanpa operasi, pendek dan pengobatan yang kuat

    ReplyDelete
  19. thanks bro, artikelnya bermanfaat


    http://cyberwars100.blogspot.com

    ReplyDelete
  20. apa komentar lama nya tidak akn trhpus gan?

    ReplyDelete
  21. siiipp, sudah saya praktekkan, gampang koq tutorialnya.. makasih ilmunya ya :)

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete