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.