Memasang Toggle Disqus dengan Komentar Bawaan dari Blogger
Memasang Disqus Bersamaan Dengan Komentar Blogger dengan Tombol Toggle

Sesuai dengan salah satu request dari teman Blogger, kali ini saya ingin membuat tutorial seputar cara memasang komentar Disqus bersamaan dengan komentar bawaan Blogger dengan tombol Toggle.

Cara kerjanya cukup sederhana, nanti akan muncul 2 tombol, yang satu berjudul "Disqus" dan yang satunya lagi "Blogger". Secara default, ketika anda membuka salah satu postingan maka yang muncul adalah komentar bawaan Blogger. Bila kita menekan tombol "Disqus", maka komentar bawaan blogger akan hilang dan muncul komentar Disqus. Begitu juga sebaliknya bila kita menekan tombol "Blogger".

Tombol ini juga saya gunakan pada blog Kode Jarwo, berikut penampakannya.

Contoh penampakan toggle komentar yang akan kita buat

Bagi anda yang ingin mencoba membuatnya, silakan ikuti panduan berikut:

1. Pemasangan CSS

Silakan anda masuk ke Edit HTML, masukkan kode berikut tepat dibawah <head> atau &lt;head&gt;

<style>
.buttonkomjarwo{border:none;color:white;font-weight:700;padding:10px 20px;border-radius:3px}.buttonkomjarwo:hover{opacity:.6;cursor:pointer}.disqus{background:#2e9fff}.blogger{background:#ff7043}#comments{width:100%}
</style>

2. Pemasangan HTML dan JS OnClick

Masih di Edit HTML, silakan anda cari kode berikut:

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

Bila ketemu, silakan anda masukkan kode berikut tepat dibawahnya:

   <div id='comment-loader'>
    <b>Silakan pilih sistem komentar anda &#8667;&#160;&#160;&#160;</b>
     <button class='buttonkomjarwo disqus' onclick='$.ajaxSetup({cache:true});$.getScript(&quot;https://iddisqusanda.disqus.com/embed.js&quot;);$.ajaxSetup({cache:false}); document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;block&apos;;'>Disqus</button>
     <button class='buttonkomjarwo blogger' onclick=' document.getElementById(&apos;comments&apos;).style.display=&apos;inline-block&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;none&apos;;'>Blogger</button>
   </div>
   <div id='disqus_thread'/>

Silakan anda ganti iddisqusanda dengan ID Disqus anda, misal kodejarwo.

Bila sudah maka penampakannya nanti kurang lebih menjadi seperti ini:

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

   <div id='comment-loader'>
    <b>Silakan pilih sistem komentar anda &#8667;&#160;&#160;&#160;</b>
     <button class='buttonkomjarwo disqus' onclick='$.ajaxSetup({cache:true});$.getScript(&quot;https://iddisqusanda.disqus.com/embed.js&quot;);$.ajaxSetup({cache:false}); document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;block&apos;;'>Disqus</button>
     <button class='buttonkomjarwo blogger' onclick=' document.getElementById(&apos;comments&apos;).style.display=&apos;inline-block&apos;; document.getElementById(&apos;disqus_thread&apos;).style.display=&apos;none&apos;;'>Blogger</button>
   </div>
   <div id='disqus_thread'/>

... (biasanya disini ada banyak kode lainnya) ...

</b:includeable>

Anda dapat mengganti kata-kata yang terdapat disana seperti "Silakan pilih sistem komentar anda" dengan kata-kata yang anda inginkan.

Selamat mencoba semoga berhasil.

10 komentar:

  1. kalau jadi 3 tab nya gimna stah.. yang 1 khusus untuk pertanyaa llalala gitu..

    BalasHapus
    Balasan
    1. Tinggal tambah tag <button baru disitu, misalnya jadi:

      [pre]<button class='buttonkomjarwo disqus' ...>...</div>
      <button class='buttonkomjarwo blogger' ...>...</div>
      <button class='buttonkomjarwo disqus' ...> ... </div>[/pre]

      Hapus
    2. untuk disqus mucul sebagai default gimana ya mas?

      Hapus
    3. Nda bisa, harus dirombak hampir keseluruhan HTML sama JS didalamnya supaya Disqus duluan...

      Hapus
    4. JS nya permanen atau suatu saat nanti bisa error? Cloud gitu?

      Di disqus kan ada sync komen, jadi setiap komen di disqus, akan otomatis jadi komen blogger.
      Kalo pake ini toggle, di sync atau ga ya? pengaruh SEO?
      Kadang-kadang kan komen yang kebaca sama google

      sebelumnya terima kasih

      Hapus
    5. JS permanen.

      Nah kalau sync atau nda saya kurang tau.

      Kalau SEO, sejauh ini saya lebih dahulukan komentar blogger yang muncul, karena komentar bawaan blogger lebih sering kebaca sama Google dibandingkan komentar Disqus, karena Disqus itu agak berat. Apalagi loading blognya sendiri sudah berat, kecil kemungkinan komentar Disqus ikut terindex. Beda dengan komentar Blogger yang "nyatu" dengan struktur HTML postingannya, bukan kayak Disqus yang external pakai frame sendiri.

      Hapus
    6. Iya mas, disqus emang berat, makanya solusi kasih toggle lumayan bagus.

      Kalo untuk nambahin toggle untuk facebook gimana ya mas? Mungkin bisa di update artikelnya? Saya kurang ngarti nambahinnya

      Hapus
    7. Belum bisa buat scriptnya saya, soalnya belum paham tentang JS Facebook....

      Hapus
  2. kalo di bloggernya udah ada komentar, toggle button dua-duanya ko jadi ga muncul ya? 😁

    BalasHapus
    Balasan
    1. Bisa jadi nda support / ketindih / kedobel dengan kode lain jadi agak error gitu...

      Hapus