Cara Mudah Mengubah Komentar Blogger Menjadi Disqus

Fitur ini sudah ada pada versi sebelumnya hanya saja tutorialnya baru sempat dilengkapi sekarang, bersifat opsional untuk Anda yang tidak ingin menggunakan komentar bawaan Blogger

Tutorial

Script Komentar disqus sudah disiapkan dalam template ini, Anda hanya perlu sedikit mengubah setelannya dan mengaktifkan tag pemanggil scriptnya. Ikuti tutorial dibawah ini:

Ubah tag komentar blogger

Tag pemanggil pada Blogger ditandai dengan <b:include>, temukan kode dibawah ini lalu ubah seperti pada contoh:


Cari kode dibawah ini:
<b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments' data='post' name='commentShowhide'/>
<b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments' data='post' name='threadedComments-modifV2'/>

// Hapus baris pertama lalu ubah bagian yang ditandai menjadi seperti dibawah ini:

<b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments' data='post' name='post-commentDisqus'/>

Perbaikan pada kode CSS

Pada saat mengganti menjadi komentar disqus, tombol untuk mengaktifkan komentar disqus mungkin tidak akan sama seperti pada demo (tidak rata tengah). Untuk memperbaiki masalah ini silahkan cari dan ubah kode CSS dibawah ini:

.Blog .show-comment label{display:block;margin:0;padding:15px;text-align:center;border:2px solid #ebeced}

Ubah menjadi seperti dibawah ini:
.Blog .show-comment label, .Blog .show-comment a{display:block;margin:0;padding:15px;text-align:center;border:2px solid #ebeced}

Sampai disini sebetulnya komentar disqus sudah muncul tapi ID nya masih menggunakan 'Jagodesain', untuk mengubahnya menjadi ID milik Anda silahkan ikuti langkah dibawah ini:

Menambahkan ID Disqus Anda

Cari kumpulan kode seperti dibawah ini dan ubah bagian yang ditandai dengan ID milik Anda:

<b:includable id='post-commentDisqus'>
  <div id='disqus_thread'>...</div>
  <script>/*<![CDATA[*/ var disqus_shortname = "jagodesain"; !function(){var e=document.createElement("script");e.defer=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}(); function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="jagodesain";!function(){var e=document.createElement("script");e.defer=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()};/*]]>*/</script>
</b:includable>

Penghapusan m=1 agar komentar disqus muncul pada mobile

Ketika mencoba komentar disqus pada template ini kami menemukan jika komentar yang sudah ada tidak muncul pada tampilan mobile, setelah ditelusuri ternyata penyebabnya adalah akhiran ?m=1 pada url blog. Karena itulah kami juga sudah menambahkan script untuk menghapus ?m=1 pada halaman mobile.

Live Preview

Untuk melihat langsung penerapan komentar disqus pada template ini, silahkan klik "Buka komentar" pada postingan ini:

Fitur ini hanya menampilkan komentar disqus saja tidak bisa menampilkan total jumlah komentar, kami tidak menyediakan cara atau tutorial untuk menampilkan jumlah komentar disqus. Anda bisa mencari tutorialnya sendiri diinternet dan mencobanya langsung

Dokumentasi Fitur Tutorial