Mengganti Komentar Blogger Jadi Komentar Google+ Responsive

Mengganti Komentar Blogger Jadi Komentar Google+ Responsive

Bola Hero Gawai

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>

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

yesss,,, pertamaaxx hehehe... :)
kalo pake comment g+ apa komentar sebelumnya akan hilang mas ??

Balas

Tidak hilang mas, komentar Blogger yang sudah ada akan tampil di komentar Google+. Tapi jika komentarnya dikembalikan lagi dari Google+ ke komentar Blogger, maka komentar yang di Google+ tidak akan tampil di Blogger. Tapi komentar dahulu yang sudah ada di komentar Blogger akan muncul lagi.

Balas

oww gitu ya,, oke nanti aku coba dulu di blog percobaan ku dulu mas, buat nyesuai'in tampilannya dulu. hehehe.. :)
makasih tutorialnya mas :)

Balas

sayangnya loading g+ masih lumayan berat mas.
jadi tetap masih menjadi pilihan utama,komentar blogger.

Balas

Sama-sama mas :) silahkan sesuaikan dan modif tampilan pesan komentarnya :)

Balas

Masih pikir pikir untuk beralih ke google+ :) bookmark dulu kang

Balas

Betul mas untuk Google+ memang masih berat, tapi untuk komentar Google+ nya untungnya js-nya pakai asynchronous jadi tidak terlalu berat di blog.

Balas

Betul mas saya juga masih begitu :) masih pikir-pikir juga :)

Balas

Keren kang, udh lama off dulu nih :D

Balas

Mantap kang, kira-kira bisa gk buat komentar nya diurutkan dari terlama hingga terbaru. soalnya komentar google+ diurutkan dari terbaru sampai terlama. makasih :D

Balas

kang mau nanya, biar ada pemberitahuan kalau ada orang yang berkomentar gimana ya kang ? :D

Balas

Makasih mas :) iya mas ke mana aja nih hehehe :)

Balas

Belum tahu mas, sepertinya itu dari sistem G+ belum nemu solusinya :)

Balas

Masuk ke profil G+ kemudian Setting, di situ ada pengaturan untuk notifikasi, bisa ke email dan phone.

Balas

bisa dijelaskan secara singkat mas ? :D, masih kurang paham :)

Balas

sepakat dengan mang Reo, lagian pas tak klik demo yang nonghol kenapa 404, coba?
kenapa bisa begituh atuh kang?

nah ini kolom komentar blogger pengen jadi pilihan pertama, bukan disqus...gimana ngulikna mang?
ngulik sendiri mah lieur, mendingan nungguin ilmunya mang Adhy ajah sayah mah ah :D

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!

×
×
×