Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
3 Des 2013

Menampilkan Komentar Blogger dan Google+ Secara Bersamaan

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.

Komentar Blogger dan Google+

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='http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');});$('#com-norm').hover(function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');}});$('#com-gplus').hover(function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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='http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');});$('#com-norm').hover(function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');}});$('#com-gplus').hover(function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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='http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png' title='Tampilkan Komentar Blogger'/><h6>atau</h6> <image id='com-gplus' src='http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');});$('#com-norm').hover(function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://4.bp.blogspot.com/-ua1TkB1Pxa4/UZS9jhLOYUI/AAAAAAAAAn0/f9INrzhd_4c/s1600/blogger-comments-on.png');}},function(){if(!$('#com-norm').hasClass('comment-on')){$('#com-norm').attr('src','http://2.bp.blogspot.com/-PUcaKpf8kqE/UZS_L1YSvUI/AAAAAAAAAoI/CEN3biyDU8s/s1600/blogger-comments-off.png');}});$('#com-gplus').hover(function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-6jz-WdsUxKc/UZS_L4mu01I/AAAAAAAAAoM/xZ6JzyHHaX8/s1600/google-plus-comments-on.png');}},function(){if(!$('#com-gplus').hasClass('comment-on')){$('#com-gplus').attr('src','http://3.bp.blogspot.com/-kb21OtHlckI/UZS-PUjOczI/AAAAAAAAAn8/4qeUEjarA_Q/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

6 Komentar

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

panjang bener scrptnya...

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

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