Akhirnya! Google Plus Comments Dapat Responsive

Setelah kemunculannya di dunia maya (hehehe biar kayak isu gosip), komentar Google Plus cukup banyak menyita perhatian para netter khususnya Blogger. Banyak juga pro dan kontra perihal sistem komentar Google Plus ini diantaranya tampilannya belum sanggup 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 menyerupai yang sudah disharing oleh +Kang Ismet ternyata tidak sanggup responsive. Salah satu cara biar sanggup responsive, harus melaksanakan Revert widget templates to default untuk widget id Blog1 yang lalu 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 instruksi CSS template, maka ini yaitu pekerjaan yang sulit untuk mengembalikan tampilan sesuai dengan tampilan sebelumnya.

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

Namun sesudah aku mendapat inspirasi (hehehehe...), balasannya aku berhasil menciptakan 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 memakai trik ini sehingga pekerjaannya lebih mudah.

DEMO ON BLOG NON RESPONSIVE

Biasanya instruksi komentar Google Plus manual menyerupai 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 biar memakai width yang kita inginkan (100%) dari id yang kita buat menyerupai 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 memakai kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah instruksi html template blog) maka harus menambahkan instruksi js Google Plus menyerupai di bawah ini, kalau 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 gampang ya...heehehe...selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post