Skip to content Skip to sidebar Skip to footer

Cara Memasang Komentar Disqus di Template Blogger Viomagz

Baru-baru ini saya mencoba mengganti komentar bawaan Blogger dengan Disqus, saya sudah mencari beberapa tutorial yang ada akan tetapi banyak yang tidak work/berhasil.

Dikarenakan template Blogger yang saya pakai ini menggunakan Viomagz versi 4.8 dari Mas Sugeng, jadi agak sedikit berbeda dalam pemasangan komentarnya di Edit HTML.

Akhirnya saya menemukan solusinya dari blog ini, hanya masalah peletakkan scriptnya aja.

Baiklah, berikut ini langkah-langkah cara memasang komentar disqusnya:

Sembunyikan kolom komentar bawaan Blogger

Jadi yang pertama kita lakukan, kita sembunyikan dulu komentar bawaan Bloggernya. Jika tidak, maka akan bentrok dengan komentar Disqusnya nanti.

Untuk menyembunyikan komentarnya:

Masuk ke menu utama/dashboard Blogger, kemudian pilih Settings/Setelan. Dan pada menu Settings ini, scroll ke bawah sampai menemukan bagian Comments/Komentar. Klik pada pilihan Comment location/Lokasi komentar.

Akan muncul pop-up, pilih Hide/Sembunyikan. Kemudian klik Save/Simpan.


Memasang script komentar Disqus

Selanjutnya masuk ke menu Edit HTML untuk mengedit script template Bloggernya.

Untuk masuk ke menu Edit HTML, bisa dari Theme kemudian klik tanda segitiga bawah sebelah tombol Customize, lalu pilih Edit HTML. Saya sarankan Backup terlebih dahulu jika terjadi hal-hal yang tidak diinginkan.




Cari kode <b:includable id='comments' var='post'>, tapi kode ini ada dua. Pastikan kode yang dicari adalah kode kedua dengan baris 2000+, bukan yang pertama 500+. Terlihat pada gambar di bawah ini:


Kemudian, copy dan letakkan script Disqus di bawah ini setelah kode <b:includable id='comments' var='post'> ini tadi.
<b:if cond='data:view.isPost'>
<div id='disqus_thread'/>
<script>
var disqus_shortname = &#39;rinaldiprtama&#39;;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
  if (!disqus_blogger_current_url.length) {
    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
  }

  var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
  var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
//<![CDATA[
(function() {
  var bloggerjs = document.createElement('script');
  bloggerjs.type = 'text/javascript';
  bloggerjs.async = true;
  bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
})();
//]]> </script>
</b:if>
Kemudian ganti rinaldiprtama dengan Disqus shortname punyamu. Jika sudah, harusnya terlihat seperti ini di Edit HTMLnya.


Klik Save/Simpan template di pojok kanan atas.


Sedikit penjelasan untuk kode script di atas:

- Kondisi if <b:if cond='data:view.isPost'> ini, maksudnya untuk mengecek apakah halaman itemnya itu berupa halaman postingan. Kenapa dicek? Karena saya hanya ingin komentar Disqus ini hanya muncul pada halaman postingan/artikel aja, bukan pada halaman statis seperti About Me, Contact Me, Daftar Isi, dan lain sebagainya.

- Jika ingin komentarnya juga tampil untuk halaman statis, tinggal ubah isPost menjadi isSingleItem. Maka komentar juga akan tampil untuk halaman statis/page.

Jika sudah disimpan, silakan cek apakah komentar Disqusnya sudah muncul atau belum di postingan/artikel. Jika masih belum juga, silakan komen di kolom komentar di bawah ini, mungkin saya bisa membantu.

Hanya saja kekurangan dari script Disqus ini masih belum menggunakan Lazyload, jadi komentar Disqus akan tetap muncul apabila belum sampai ke bagian komentar postingan, padahal akan lebih bagus jika munculnya hanya pada saat kita scroll ke bagian komentar saja.

Mungkin saya akan membuat tutorialnya lain kali untuk fitur Disqus Lazyload ini.

Terima kasih telah membaca artikel ini, semoga membantu dan bermanfaat.

Referensi/sumber:

Rinaldi Pratama Putra
Rinaldi Pratama Putra Reality is a lovely place, but I wouldn't want to live there.