Cara Menampilkan Komentar Blogger dan Google Plus Bersamaan

Setelah lontang lantung melalang buana mencari pencerahan akhirnya saya temukan juga Cara Menampilkan Komentar Blogger dan Google Plus Bersamaan di blog master  Kang Ismet . Tentunya saya sangat berterima kasih kepada  Kang Ismet  atas tutorialnya yang satu ini.

Tentang pemasangan komentar Google Plus dan Blogger secara bersamaan, jika secara default tampilan konten blogger terdapat fasilitas kotak komentar blogger, namun bagaimana caranya agar para pembaca blog kita yang aktif di sosial media Google Plus bisa memberikan komentarnya tanpa harus berkomentar di kotak komentar blog default kita apalagi jika kotak komentar blogger kita diset khusus untuk member tentunya dengan trik ini akan lebih memperluas kesempatan para pembaca blog kita yang memang aktif di Google Plus tetap bisa berinteraksi dengan admin dan para pengguna Google Plus lainnya.

Tampilan kotak komentar Google Plus dan Blogger ini tertata secara sejajar namun dengan sistem toggle sehingga para komentator bisa memilih lewat media apakah mereka akan berkomentar di blog kita.

Untuk segi tampilannya, bisa kita lihat gambar di bawah ini.

Cara Memasang Komentar Blogger dan Google Plus Secara Bersamaan :
1. Silahkan kalian masuk ke blog kalian masing-masing.

2. Pilih Template pada navigasi sebelah kiri halaman Dasbor

3. Backup terlebih dahulu template kalian. Ini bertujuan untuk mengantisipasi apabila terjadi kesalahan.

4. Cari kode di bawah ini :

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

5. Jika sudah ketemu, silahkan ganti kode di atas dengan script di bawah ini :

<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/AVvXsEjwa2Y6ts8Uy3PhoG4ovrMgilvdolYbfuNOwF4EUhMo8G7rEZCCW4EgAuV0d-w5bwlCMHiQiP9XwnvGBLfJ92e8hxoUpG9zGl3MqXKh_de0Tl2bqT31OW3aCVH0y_PtstzVycQR7SL5iYd7/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10sXVTyPW-BINgOsMktVnrm3UB9xJrSnocyRhnEB8bp1CcfGJCdgqAHln7l4TpJE2L1GwWpMsOD1OHNzHIwcwFvQVO6E6FkG6VTf_Ya3C1Ab9qlE9egjgVFGn2aURng8N3gRWfEKEOCZj/s1600/Google-plus-comments-off' title='Tampilkan Komentar Google+'/><h6>silahkan tentukan pilihan sobat!</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 type='text/javascript'>

      window.___gcfg = {

        lang: &#39;id-ID&#39;

      };

</script>

<script src='http://apis.google.com/js/plusone.js'/>

<script type='text/javascript'>

//<![CDATA[

gapi.comments.render('gcomments',{href:window.location,width:'640',first_party_property:'BLOGGER',view_type:'FILTERED_POSTMOD'});$('#com-norm').click(function(){$('#gcontainer').css('display','none');$('#comments').css('display','block');$('#com-norm').addClass('comment-on');$('#com-gplus').removeClass('comment-on');$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwa2Y6ts8Uy3PhoG4ovrMgilvdolYbfuNOwF4EUhMo8G7rEZCCW4EgAuV0d-w5bwlCMHiQiP9XwnvGBLfJ92e8hxoUpG9zGl3MqXKh_de0Tl2bqT31OW3aCVH0y_PtstzVycQR7SL5iYd7/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10sXVTyPW-BINgOsMktVnrm3UB9xJrSnocyRhnEB8bp1CcfGJCdgqAHln7l4TpJE2L1GwWpMsOD1OHNzHIwcwFvQVO6E6FkG6VTf_Ya3C1Ab9qlE9egjgVFGn2aURng8N3gRWfEKEOCZj/s1600/Google-plus-comments-off');});$('#com-gplus').click(function(){$('#comments').css('display','none');$('#gcontainer').css('display','block');$('#com-norm').removeClass('comment-on');$('#com-gplus').addClass('comment-on');$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6pDzJy767ferZH4KCP3hqNV7vMaDfQEPyMKrHnc6Jku30cTISDR43O4myxBgWNzVHozU2WxHXhwJwAbC2sjw0H5bYvtO_hD8kjTbRJdNYD-1g-PSZ6CaDOpHH_wBqhhBfjyRsnySM-81/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipViGM3Ft02AYdj3y_V_TwHQthHSQHlANusbJdaQk6OOuOeqb171etTRJDSEp2nbGb-7JN0ldKfjgpff2d5w00EwUIWlTY-XdFo-cO1Kdq43Uy3PynfLxmvITHe_etsuLGDkuC_hbanhM/s1600/google-plus-comments-on.png');});$('#com-norm').hover(function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwa2Y6ts8Uy3PhoG4ovrMgilvdolYbfuNOwF4EUhMo8G7rEZCCW4EgAuV0d-w5bwlCMHiQiP9XwnvGBLfJ92e8hxoUpG9zGl3MqXKh_de0Tl2bqT31OW3aCVH0y_PtstzVycQR7SL5iYd7/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6pDzJy767ferZH4KCP3hqNV7vMaDfQEPyMKrHnc6Jku30cTISDR43O4myxBgWNzVHozU2WxHXhwJwAbC2sjw0H5bYvtO_hD8kjTbRJdNYD-1g-PSZ6CaDOpHH_wBqhhBfjyRsnySM-81/s1600/blogger-comments-off.png');}});$('#com-gplus').hover(function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipViGM3Ft02AYdj3y_V_TwHQthHSQHlANusbJdaQk6OOuOeqb171etTRJDSEp2nbGb-7JN0ldKfjgpff2d5w00EwUIWlTY-XdFo-cO1Kdq43Uy3PynfLxmvITHe_etsuLGDkuC_hbanhM/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10sXVTyPW-BINgOsMktVnrm3UB9xJrSnocyRhnEB8bp1CcfGJCdgqAHln7l4TpJE2L1GwWpMsOD1OHNzHIwcwFvQVO6E6FkG6VTf_Ya3C1Ab9qlE9egjgVFGn2aURng8N3gRWfEKEOCZj/s1600/Google-plus-comments-off');}});

//]]>

</script>

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

Note : Kalian bisa mengganti ukuran toggle yang akan ditayangkan dengan cara mengganti angka  615px  dan angka  640  sesuai dengan ukurab blog kalian masing-masing.

6. Selanjutnya cari kode di bawah ini :

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

7. Jika ketemu, silahkan ganti kode di atas dengan script di bawah ini :

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

8. Simpan template

Jika tidak ada error, silahkan kalian masuk ke salah satu konten / artikel blog kalian yang telah terdapat komentatornya, dan lihatlah. Jika trik ini berhasil maka akan tampil  pilihan komentar Google Plus atau Blogger. Dan objek ini akan tampil dengan sistem toggle dengan cara memilih salah satunya.

Semoga trik ini bermanfaat dan silahkan mencobanya sendiri. Good Luck :D

Source : http://blog.kangismet.net/2013/08/menampilkan-komentar-blogger-dan-google-plus-bersamaan.html