Cara Menampilkan Komentar Blogger dan Google Plus Secara Bersamaan

Putra Kefa
Putra Kefa
Updated:

Cara Menampilkan Komentar Blogger dan Google Plus Secara Bersamaan, Sekarang saya akan menjelaskan bagaimana cara menampilkan Komentar Blogger dengan Google+ secara bersamaan dengan sistem toggle (memasang dua sistem, dengan menggunakan sistem on dan off) hasil karya Kang Ismet :)

Cara Memasang Komentar Blogger dan Google+ Bersamaan


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>

kemudian blok seluruhnya.

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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/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/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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>
Simpan template.

Beberapa Permasalahan Yang Muncul


1. Saya sudah melakukan langkah di atas, toggle sudah muncul tapi tidak bisa diklik.
Apabila toggle sudah muncul dan tidak aktif (tombol blogger atau google+ tidak bisa diklik), maka dipastikan template sobat belum terpasang jQuery.

2. Saya sudah melakukan langkah di atas, dan template sudah terpasang jQuery tapi tidak muncul apapun.
Apabila sobat sudah melakukan langkah2 di atas, bahkan template sudah terpasang jQuery, dipastikan bahwa sobat menggunakan sistem komentar lama atau sistem komentar hack. Karena tutorial di atas untuk thread comment bawaan blogger.

Memasang Komentar Blogger dan Google+ pada Sistem Komentar Lama


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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/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/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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>
Simpan template, dan lihat hasilnya.

Memasang Komentar Blogger dan Google+ pada Threaded Comments 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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/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/AVvXsEhE3NGF6Q0tmxxqvSJKOte0OT8xC4R7cI7VnRf15pLalINMq9VudAlFA6DDwwtzJr0CA3ECcDxoRW57mCa6oeY03Dk8djh40MEZPelIX2xWJNfaKs_W-5cekru9JUzIEiayKbd0g8h_iP7T/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnheYjGUmwRfnSncEOQMn1uMdJXvnupnhtCobjxF1rGyJnIkFSx2lo5r33BtgBX2ns8CtMaHkUgL5VloylfJbGhulAN54qaDCtqb7r5Vr0nNhNxiqVUm0DpfecihVPtLPlT7_3_epuS1n/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/AVvXsEjb-qOAcNwaAJFTbwwF8ElnqwXiyohLEriKlPcwEYRQNvKbGnMv5fFXXObuSINRDOL-YIAljAHKZDKK2WpzhbIWClccRakVeyIA7WWk9q7U61xwRai5vWiIj1B5LKyeifvoSsxGXI-ba6yw/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw4LnNbkjb9rBm3AeaUXKDW1HtHEQ3Y_Vq5ikc9VM5islaQ55KWj9NEifB7_IzG67ZO9dynkS5Y3lNUb6mXIgOYm4a2fY_cSvwbLZsFkHH7gpydtOQGTEEF7SmcuthdmnBstrwCuqyqAb/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>
Simpan template dan lihat hasilnya.

Semoga bermanfaat :) Happy Blogging !!
Blogger
1 comment
  1. Putra Kefa
    tes komentar pertamaxx
    Reply