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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 Juli 2018 17.38

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

Balas
Arif Kode Jarwo
Arif
# 10 Juli 2018 17.14

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

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 Juli 2018 10.32

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.

Balas
Arif Kode Jarwo
Arif
# 8 Juli 2018 23.44

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

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 7 Juli 2018 13.14

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

Balas
Arif Kode Jarwo
Arif
# 6 Juli 2018 15.12

untuk disqus mucul sebagai default gimana ya mas?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 19 Mei 2018 16.22

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]

Balas
Renz - Game Kode Jarwo
Renz - Game
# 19 Mei 2018 15.44

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

Balas