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 = 'rinaldiprtama';
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
//<![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>
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:
