Akhirnya! Google Plus Comments Bisa Responsive

Akhirnya! Google Plus Comments Bisa Responsive

Bola Hero Gawai

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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

16 Comments Add Comment

Amankan Pertamaknya dulu Mas.. =)D

Balas

Sudah saya coba Mas, nampaknya <div id='g_comments' style='width: 100%'> belum ada penutupnya, sehingga tempalate tidak bisa di save

Balas

manteb om adhy kunjung balik ya... general.web.id, masih 5 hari idup nya, sebelum nya way-kambas.blogspot.com yang dari mas kolis.

Balas

Heheheeh iya juragan :) ada yang kelewat... Sudah saya betulkan...makasih koreksinya.

Balas

Hehehehe silahkan gan :)

Balas

Siipp mas :) mudah-mudahan TLD nya sukses mas... blognya masih keren seperti dulu hehehe :) mudah-mudahan gajah-gajahnya tambah betah ya mas hehehe... ditunggu TLD nya mas barusan masih under contruction. :)

Balas

makasih mas :) jadi nambah nih fitur responsivenya.

mas mau nanya nih kalo komen facebook , blog, google plus dipasang semua akankan menjadi error ? :(

Balas

Tidak mas :) bisa juga. Coba simak di sini http://www.kompiajaib.com/2014/06/show-hide-blogger-google-and-facebook-comments-on-blog.html

Cuman jika komentar blogger dan google+ disatukan maka semua komentar blogger akan muncul juga di komentar google+ tapi untuk komentar google+ tidak akan muncul di blogger. hanya itu saja.

Balas

cemungut ea ea ea =D

Balas

Waduh sudah banyak tertinggal saya kang biasa sibuk usrip hehe ..
Minal Aidzin Walfaiidzin dulu kang maafkan saya ...
Kalau begini enak jadinya kang kalau pake si plus-plus hehe

Balas

wah kalau responsive jadinya bisa diterapin diblogku nih yakang.saya amankan dulu deh

Balas

Wah keren nich kalo responsive mah saya minat Kang :D

Balas

Sama-sama kang mohon ma'af lahir bathin :)
Iya kang saya juga mulai tergoda hehehe :)

Balas

Iya mas bisa diterapkan di blog apa pun :)

Balas

Iya kang silahkan dicoba hehehe :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×