Menampilkan Komentar Blogger dan Google+ Secara Bersamaan ~ Hilbram Kurnia Blog's Tutorial

3 Des 2013

Menampilkan Komentar Blogger dan Google+ Secara Bersamaan - Setelah beberapa waktu lalu saya sudah membuat artikel dengan tema yang sama yaitu persoalan mengenai komentar Google+, yaitu Mengubah Bahasa Komentar Google+ di Blogger, Solusi Gagal Mengaktifkan Sistem Komentar Google+ di Blogger, dan Mengaktifkan Sistem Komentar Google+ di Blogger. Dan kali ini saya akan kembali membuat artikel dengan tema yang sama.

Sempat kemarin saya menemukan artikel dari blog kang Ismet yang membahas untuk menampilkan komentar Blogger dan Google+ secara bersamaan/berdampingan. Dari itu saya tertarik untuk repost dan membagikannya keteman-teman semua, berikut tampilannya :

Pemasangan untuk Sistem Komentar Lama

Langkah 1 : Backup Template
Inilah yang terpenting, sebelum melakukan editing apapun biasakan untuk membackup template untuk antisipasi error dalam proses editing.

Langkah 2 : Temukan kode dibawah ini :


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

Seleksi semuanya

Langkah 3 : Ganti kode di atas (pada langkah 2) 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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/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/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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.

Langkah 4 : Temukan 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>

Langkah 5 : SAVE Template..

Pemasangan untuk Sistem Threaded Comment (Komentar Baru)

Ada perbedaan kode untuk sistem threaded comment dan sistem komentar lama pada blogger. Apabila menggunakan sistem komentar lama, silahkan cari kode :


<b:includable id='comments' var='post'>

...

</b:includable>

dan ganti kode dengan yang ini :


<b:includable id='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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </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>
  <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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/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/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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 #ccc;
padding: 10px;
float: left;
width: 615px;
margin: 5px 5px 15px 2px;
background: #f5f5f5;
text-align: center;
  }
#com-header h6{
font-size: 14px;
font-weight: bold;
text-align: center;
float:left;
text-transform:uppercase;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
</style>
</b:includable>

SAVE Template, dan lihat hasilnya..

Pemasangan untuk Sistem Threaded Comment Hack

Threaded Comments Hack, sebenarnya adalah sistem komentar lama yang dimodifikasi dengan JavaScript sehingga menjadi komentar bertingkat seperti yang saya gunakan. Untuk mengaktifkan Komentar Blogger dan Google Plus secara bersamaan, pada komentar ini harus lebih teliti.

Sebenarnya hampir mirip dengan komentar lama caranya, tapi tidak bisa copy paste kode diatas, karena pada threded comments hack ini ada struktur yang berbeda.

Langkah 1 : Tambahkan kode di bawah ini setelah <b:includable id='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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/s1600/Google-plus-comments-off' title='Tampilkan Komentar Google+'/><h6>silahkan tentukan pilihan sobat!</h6>
</div>
<div id='comment-zone'>

Langkah 2 : Tambahkan kode dibawah ini sebelum penutupnya atau </b:includable> :


</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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/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/AVvXsEhC7n3WRcaHrDHE8yM7oMKSzPg9uZ78aL7ZMfZhTXdLvAGr7CfGW7Xg4pj3I_UDST7i63eZJWmsH1Ic6UjBbhsyxN1e5lY3GOSh8RkKFB7_OSWPDqnSKMbdx03tkm7aPmnMWuigpHY4eVjD/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14nrGVtotHzQnM6apDsCCmyoqxew1Xj_F1_DCegCiD7SUzeBUp_Sf9GAjqNHWc8sqkr3D6oaKMGhBqfJLyWoz6-mCDnNM_V2Gd5bvdT05aqCiuMgBI-_5lRwJnezUCaw5fGKLHPvoxSvq/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/AVvXsEgNzob55SaJyvGG8q178lFKuUh5FynAVosmhyNvKRJSsF0sf9JHTdvk98bnOKktPl6YrlnuUfC4tVFbzr1n1Hb0Ak7YUBolJrOvaqRZi7NmDof7vNah6uuyCHMymIiA5t8x_QErX3IejEuW/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVsx9uftdxeYKd5-UaQNl32IoJ3IEgZDJlb-2bbSjaGRvj4rcyzaxLgp6UHaDd19qkzTIVUS5zkFBxqqXvgKemyKlo_UM3HAdtXAErbQd7se2D5NRAFEnS_oWrI-g8o9fGiCAMAlfCTo2/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 #ccc;
padding: 10px;
float: left;
width: 615px;
margin: 5px 5px 15px 2px;
background: #f5f5f5;
text-align: center;
  }
#com-header h6{
font-size: 14px;
font-weight: bold;
text-align: center;
float:left;
text-transform:uppercase;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
  }
</style>

SAVE Template dan lihat hasilnya..

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

Balas

4 Desember 2013 pukul 07.40

ok thanks atas info nya...
ditunggu kunjungan baliknya... :D
www.aiizahh.com

4 Desember 2013 pukul 18.57

ok dah .. :-d

Anonim

5 Desember 2013 pukul 19.26

panjang bener scrptnya...

5 Desember 2013 pukul 21.47

Memang sih, tpi ringan kok! ^_^

Produksi Sukabumi

17 Januari 2014 pukul 15.25

hihi.. boleh juga.. tapi udah dicoba, berhasil sih, tapi komenan nya jadi ilang gan hibram,. hihi

17 Januari 2014 pukul 18.24

Penempatannya mungkin tidak tepat, coba diutak-atik.. =D

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal

Terima kasih telah berkomentar