Mengganti Komentar Blogger Jadi Komentar Google+ Responsive

Mengganti Komentar Blogger
Setelah sekian lama coba utak-atik komentar Google Plus agar bisa responsive ketika dipasang manual di blog, akhirnya kemarin saya berhasil membuat komentar Google Plus menjadi responsive dengan bantuan sebuah javascript sederhana sehingga bisa dipasang manual di template responsive secara mudah. Namun bisa juga digunakan di blog yang menggunakan template dinamis.


Nah kali ini saya akan sharing cara mudah mengganti komentar Blogger menjadi komentar Google Plus responsive dan memindahkan pesan komentar yang biasanya ada di atas editor komentar Blogger menjadi berada di atas komentar Google Plus seperti pada demo di link demo di bawah ini.


Sebenarnya ada 2 pilihan yang bisa kita lakukan, diantaranya.
  1. Menyembunyikan komentar Blogger dan menampilkan komentar Google Plus. Dengan ini akan memudahkan Anda jika ingin kembali menggunakan atau menampilkan komentar Blogger kembali.
  2. Menghapus komentar Blogger dan menggantinya dengan komentar Google Plus dan berniat hanya akan menggunakan komentar Google Plus seterusnya. Di pilihan ini kita menghapus kode CSS dan kode HTML komentar Blogger. Dengan pilihan ini kita harus kembali membubuhkan kode CSS dan HTML komentar Blogger lagi ketika ingin kembali menggunakan komentar Blogger.

Pilihan 1
Menyembunyikan komentar Blogger dan menampilkan komentar Google Plus.

Langkah 1
Silahkan tambahkan kode display:none pada kode CSS komentar Blogger seperti di bawah ini.


#comments{........;display:none}

Langkah 2
Silahkan cari kode di bawah ini


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

kemudian geser ke bawah dan cari penutupnya </b:includable> dan simpan kode di bawah ini tepat di atas kode penutup tadi.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='komentar'>
      <p><data:blogCommentMessage/></p>
      <div id='g_comments' style='width: 100%'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
</div></div>
<script type='text/javascript'>
    document.getElementsByClassName(&#39;g-comments&#39;)[0].setAttribute(&#39;data-width&#39;, document.getElementById(&#39;g_comments&#39;).clientWidth);
    </script>
</div>
</b:if>

Perhatikan kode <p><data:blogCommentMessage/></p> itu adalah kode untuk menampilkan pesan komentarnya.

Langkah 3
Silahkan tambahkan kode CSS di bawah ini


.komentar{margin:70px auto 20px;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;}
.komentar p{background: #666;padding:10px;margin:20px 3px;color:#eee;font:14px &quot;Open Sans&quot;,&quot;Trebuchet MS&quot;,Helvetica,sans-serif;line-height:20px;display:block;border-radius:3px;position:relative}
.komentar p:after{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent;}

Jika tampilannya kurang sesuai dengan template blog Anda, silahkan sesuaikan pada kode CSS di atas, begitu pun untuk tampilan kotak pesan komentarnya. 

Jika ingin kembali menggunakan komentar Blogger dan menyembunyikan komentar Google+ silahkan hapus kode display:none pada Langkah 1 di atas, dan tambahkan kode display:none pada kode CSS .komentar di atas. Namun perlu diingat, jika komentarnya dikembalikan ke komentar Blogger, maka komentar yang sudah ada di komentar Google+ tidak akan tampil di komentar Blogger. Namun sebaliknya jika Anda menggunkan komentar Google+ maka komentar yang sudah ada di komentar Blogger akan tampil di komentar Google+.

Pilihan 2
Menghapus komentar Blogger dan menggantinya dengan komentar Google Plus.

Langkah 1
Silahkan hapus semua kode CSS komentar Blogger blog Anda, misalnya seperti kode di bawah ini.


#comments{margin:70px auto 0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;display:none}
#comments h3 {margin-bottom:25px;font:24px Oswald;text-transform:uppercase}
.comment_avatar { height: 48px; width: 48px; background: #fff url(http://2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/s48/anon48.gif) no-repeat center center; float: left; margin-top: 5px; margin-right: 10px; margin-left:-30px;padding:4px;border:1px solid #ddd; overflow: hidden;transition:all 400ms ease-in-out }
.comment_name { color: #444;font-size: 18px; font-weight: normal; line-height: 19.5px; max-width: 100%; text-decoration: none; margin-top: 8px;text-transform:uppercase }
........
........
........

Langkah 2
Silahkan cari kode di bawah ini.


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

kemudian silahkan hapus kode yang berada di bawahnya sampai kode yang ada di atas penutupnya. Jadi sisakan kode di atas tadi dan penutupnya.

Langkah 3
Silahkan lakukan Langkah 2 dan Langkah 3 pada Pilihan 1 di atas.  

Dan bagi blognya yang menggunakan kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah kode html template blog) maka harus menambahkan kode js Google Plus seperti di bawah ini, jika sudah ada maka lewati langkah ini.


<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments