Cara Membuat Komentar Blog dan Google Plus Berdampingan

Assalamualaikum kawan,hari ini saya akan bebagi kembali tentang komentar pada blog,yaitu Cara Membuat Komentar Blog dan Google Plus Berdampingan,memang saya sudah terlambat membuat postingan seperti ini,akan tetapi kata pepatah,LEBIH BAIK TERLAMBAT,DARIPADA TIDAK SAMA SEKALI.Kata-kata itu yang membuat saya tetap berbagi meskipun terlambat.Sebelumnya saya sudah pernah memposting tentang Cara memasang komentar google plus saja tanpa komentar blog,dan saya juga sudah pernah memasang komentar ini,akan tetapi saya copot lagi karena menurut saya komentar google plusnya jarang terpakai,tapi buat kawan-kawan yang memang ingin memasangnya,silahkan ikuti cara-caranya di bawah ini:

• Pertama tentunya login dulu ke akun sobat
• Selanjutnya Edit template,dan jangan lupa backup dulu supaya aman
• Kemudian temukan kode di bawah ini,dan blok semuanya

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

• Ganti kode di atas dengan kode 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/AVvXsEilpaTwKJMrZLmxKab0AETLEEJlNy-KWM277eOT8fDyp46BuKXFPKhtUHQBi68adfj6g238hhIdl_QshvQ6qCbnQBBVenuvyodcE2njf5ZrxMlYW2hZ_jwd5oYjjIAAy54Qtsx0R4svXmzN/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYdfw7k9dnHyd-EMLUIXH2JRot7_k5wVk6Ieh-vr9UxH5-MtUY3-pEQEkN_ZiLZqnHIMxiM4kO0LgwZIyAoFuUvtPehsIHSLIrCIaH1-0K2AfQTWdBhI6yZGwszs74_0HeEEaVcCHVB5J/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/AVvXsEilpaTwKJMrZLmxKab0AETLEEJlNy-KWM277eOT8fDyp46BuKXFPKhtUHQBi68adfj6g238hhIdl_QshvQ6qCbnQBBVenuvyodcE2njf5ZrxMlYW2hZ_jwd5oYjjIAAy54Qtsx0R4svXmzN/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYdfw7k9dnHyd-EMLUIXH2JRot7_k5wVk6Ieh-vr9UxH5-MtUY3-pEQEkN_ZiLZqnHIMxiM4kO0LgwZIyAoFuUvtPehsIHSLIrCIaH1-0K2AfQTWdBhI6yZGwszs74_0HeEEaVcCHVB5J/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/AVvXsEiQHewP6-VcHa4wf-Ixmkdjk0rlglB9p-AmVHgohk1P4StIzwhZw2wQ14APeRpxam6EW0Qe6jQ1Qu00K1qSGj7snq_7VCC9hhh9CdxPyq_xmGbM4ETpjGZGJcZXDIzkTxiM10cxBm8IJjEI/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWmbbuKIpAZuyH58cs613bti-dlkOAv0Oy3d2sjUsHh8er3xx6BiOkwMJtTCSDrJs94H88hAF3jAjEHRZrLqLb_S0IPMq1-S6-wAFWAwzwOa8wvN1ObvNQxhuGGE9aLS-Su4d0Qgu9WZs/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/AVvXsEilpaTwKJMrZLmxKab0AETLEEJlNy-KWM277eOT8fDyp46BuKXFPKhtUHQBi68adfj6g238hhIdl_QshvQ6qCbnQBBVenuvyodcE2njf5ZrxMlYW2hZ_jwd5oYjjIAAy54Qtsx0R4svXmzN/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHewP6-VcHa4wf-Ixmkdjk0rlglB9p-AmVHgohk1P4StIzwhZw2wQ14APeRpxam6EW0Qe6jQ1Qu00K1qSGj7snq_7VCC9hhh9CdxPyq_xmGbM4ETpjGZGJcZXDIzkTxiM10cxBm8IJjEI/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/AVvXsEiuWmbbuKIpAZuyH58cs613bti-dlkOAv0Oy3d2sjUsHh8er3xx6BiOkwMJtTCSDrJs94H88hAF3jAjEHRZrLqLb_S0IPMq1-S6-wAFWAwzwOa8wvN1ObvNQxhuGGE9aLS-Su4d0Qgu9WZs/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYdfw7k9dnHyd-EMLUIXH2JRot7_k5wVk6Ieh-vr9UxH5-MtUY3-pEQEkN_ZiLZqnHIMxiM4kO0LgwZIyAoFuUvtPehsIHSLIrCIaH1-0K2AfQTWdBhI6yZGwszs74_0HeEEaVcCHVB5J/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> 

Sesuaikan ukuran toggle, ganti angka 615px sesuai ukuran blog sobat. Kemudian ganti juga angka 640 sesuaikan dengan ukuran blog sobat.

• Cari kode di bawah ini

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

• Ganti dengan kode 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> 

Jika di template sobat belum ada kode Jquery,silahkan tambahkan dan apabila sudah maka tidak usah di tambahkan

• Cari kode </head> dan tambahkan kode di bawah ini di atas atau sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

• Simpan dan lihat hasilnya.

Untuk kode yang saya berikan di atas memang memiliki beberapa kekurangan yang belum bisa saya mengerti karena dari dulu saya tidak pintar-pintar belajar html,akan tetapi tidak ada salahnya jika anda mencobanya terlebih dahulu,atau anda bisa memperbaiki kode dan cara di atas untuk jadi lebih baik lagi silahkan saja,adapun kekurangannya yang saya ketahui adalah sebagai berikut:

1. Komentar google plusnya tidak tampil jika belum ada yang komentar terlebih dahulu
2. Kode Jquery nya terkadang terjadi konflik yang mengakibatkan beberapa widget atau element lain nya tidak berfungsi,seperti slider dan lainnya.

Mungkin itu saja dari saya tentang Cara membuat Komentar Blog dan Google Plus Berdampingan,semoga bisa bermanfaat dan apa bila ada yang salah tolong kawan-kawan sudi kiranya untuk memperbaiki,terimakasih dan salam sukses