OnClick Comments

    Kali ini saya ingin berbagi tutorial membuat tombol show hide komentar Disqus dengan sistem OnClick JavaScript, khusus untuk template non-AMP. Sebenarnya, latar belakang dari pembuatan artikel ini ada dua, yaitu request dari mas Timon (pemilik mastimon.com) dan kebanyakan artikel seperti ini yang muncul di Google dikhususkan untuk template AMP. Nah kali ini saya ingin berbagi script yang non-AMP.

    Sesuai dengan apa yang saya katakan diatas, tombol show hide ini memiliki sistem Load OnClick HTML dengan JavaScript. Dengan kata lain, komentar Disqus BUKAN akan tampil ketika tombol ditekan, melainkan akan di muat atau load ketika tombol ditekan, sehingga komentar akan tampil. Jadi, bukan hanya sekedar tombol show hide biasa...

    Kelebihan dengan sistem load OnClick ini adalah tentu dapat meringankan loading blog, karena komentar tidak akan dimuat sebelum tombol ditekan. Hal ini juga salah satu solusi dari masalah Render Blocking JS di PageSpeed Insights akibat JS eksternal dari Disqus.

    Langsung saja ya. Pertama, silakan anda hapus terlebih dahulu semua script yang berhubungan dengan Disqus di blog anda agar tidak terjadi error. Lalu, cari kode berikut di Edit HTML:

    <div class='comments' id='comments'>

    Bila sudah ketemu, tempatkan kode ini dibawahnya:

    <div id='disqus_thread'/>

    Berikut ini adalah kode HTML dari tombolnya. Anda dapat menempatkannya dimana saja yang anda mau, bisa di Tata Letak, di dalam artikel, atau diatas kode disqus_thread yang ada di atas tadi. Anda juga dapat mengubah bentuk tombolnya dengan mengedit CSS pada tag style yang sudah saya sediakan di kode berikut.

    <div id='jarwodisload' style='text-align: center'>
      <button class='jarwobutton disqus' onclick='$.ajaxSetup({cache:true});$.getScript(&quot;https://kodejarwo.disqus.com/embed.js&quot;);$.ajaxSetup({cache:false});$("#jarwodisload").toggle();'>Disqus</button>
    </div>
    <style>
      .jarwobutton{border: none; color: white; font-weight: 700; padding: 10px 20px;border-radius:3px}
      .jarwobutton:hover {opacity:0.6;cursor:pointer}
      .disqus {background:#2e9fff;}
    </style>
    Ganti tulisan yang saya mark kuning dengan ID disqus anda. Biasanya ID Disqus sama dengan nama blog anda, misal kodejarwo, mastimon, kompiajaib, dan lain-lain.

    Simpan template dan lihat hasilnya.