Akhirnya! Google Plus Comments Bisa Responsive

Responsive Google Plus Comments
Setelah kemunculannya di dunia maya (hehehe biar kayak berita gosip), komentar Google Plus cukup banyak menyita perhatian para netter khususnya Blogger. Banyak juga pro dan kontra tentang sistem komentar Google Plus ini diantaranya tampilannya belum bisa dikustomisasi. Namun di sisi lain, komentar Google Plus ini cukup baik untuk mendongkrak performa postingan khususnya menjaring pembaca dari Google Plus itu sendiri.

Selain itu, untuk template blog custom yang responsive yang menampilkan komentar Google Plus dengan cara manual seperti yang sudah disharing oleh +Kang Ismet ternyata tidak bisa responsive. Salah satu cara agar bisa responsive, harus melakukan Revert widget templates to default untuk widget id Blog1 yang kemudian mengaktifkan komentar Google Plus dari tab Google+ di Dashboard. Tentunya hal ini akan menambah banyak pekerjaan lagi untuk merapihkan tampilan postingan yang berubah. Bagi yang belum mengerti betul kode CSS template, maka ini adalah pekerjaan yang sulit untuk mengembalikan tampilan sesuai dengan tampilan sebelumnya.

Cukup sulit juga mencari cara agar komentar Google Plus ini bisa responsive. Ketika searching di Google pun hanya terdapat cara untuk Wordpress untuk komentar Google Plus yang responsive ini.

Namun setelah saya mendapatkan wangsit (hehehehe...), akhirnya saya berhasil membuat komentar Google Plus ini menjadi responsive. Silahkan coba perhatikan untuk komentar Google Plusnya di setiap device-nya pada link responsinator di bawah ini dan pada blog yang tidak responsive. Dua-duanya menggunakan trik ini sehingga pekerjaannya lebih mudah.


Biasanya kode komentar Google Plus manual seperti di bawah ini.


<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'></div>

Jika kita merubah angka pada data-width dengan 100%, maka tampilan komentar Google Plus-nya akan error.

Untuk itu kita buat sebuah javascript untuk mengeset data-width agar menggunakan width yang kita inginkan (100%) dari id yang kita buat seperti di bawah ini.


<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>
<script type='text/javascript'>
    document.getElementsByClassName('g-comments')[0].setAttribute('data-width', document.getElementById('g_comments').clientWidth);
    </script>
</div>

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>

Ternyata cukup mudah ya...heehehe...selamat mencoba....

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