Cara Memasang Komentar Disqus di Artikel Blogger (Blogspot)

Kali ini saya akan menjelaskan tutorial bagaimana caranya membuat akun Disqus dan cara memasang komentar Disqus di Blogger / Blogspot.

Alasan kenapa saya beralih ke Disqus, lantaran fiturnya yang lebih lengkap.

Apalagi komentar Blogger dari Template Blogger ini sudah rusak. Saya kebingungan ketika ingin memperbaikinya.

Sebelum masuk ke tutorial intinya, kalian harus menyelamatkan Template Blogger yang digunakan ke Notepad.

Waspada, kan lebih baik. Takutnya tema blog rusak :)

Cara Membuat Akun Disqus untuk Blogger (Sign Up)

Kalau ingin memasang widget / plugin Disqus di Blogger, kalian harus memiliki akun Disqus.

Silakan masuk ke situs Disqus, lakukan registrasi - membuat akun.

Caranya cukup mudah kok. Kalian bisa login/daftar melalui akun Facebook, Twitter, atau masuk ke Disqus melalui akun Google yang sudah dimiliki.

Detailnya seperti ini... Registrasi, lalu buat akun Disqus dengan akun sosial media (di atas), terakhir silakan tekan tombol Submit untuk mematuhi peraturan Disqus.

Jika sudah membuat akun Disqus, selanjutnya masuk ke laman ini:

https://disqus.com/admin/create/

Nanti, tampilan lamannya seperti ini:

Silakan isi Website Nama dengan nama blog, pilih kategori yang sesuai dengan topik blog, dan pilih bahasa yaitu Bahasa Indonesia.

Lalu tekan tombol Create Site

Pada pilihan Select Plan, kalian direkomendasikan untuk memilih Disqus versi Basic karena bisa digunakan secara gratis. Cek gambar di bawah ini:

Perhatikan: JANGAN tekan tombol Subscribe Now, karena kita langsung loncat ke tutorial bagaimana caranya memasang widget komentar Disqus ke Blogger.

Pada tahap ini, kalian sudah memiliki akun Disqus. Jadi, santai saja :)

Jangan lupa, lakukan konfirmasi email (Disqus Account) melalui Inbox pada email yang didaftarkan. Harus dikonfirmasi, bro!

Cara Memasang Komentar Disqus di Artikel Blogger (Blogspot)

Login ke Blogger > Tema > Edit HTML

Cari kode name='comment_picker' atau kode commentPicker di dalam Template Blogger.

Simpan kode di bawah ini:

<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'/>
<script>
var disqus_shortname = 'kodeblogger';
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>

Letakkan kode di atas, baik sebelum atau sesudah kode name='comment_picker'

Contohnya seperti ini:

<b:include data='post' name='comment_picker'/>
<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'/>
<script>
var disqus_shortname = 'kodeblogger';
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>

Atau seperti ini:

<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'/>
<script>
var disqus_shortname = 'kodeblogger';
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>
<b:include data='post' name='comment_picker'/>

Perhatikan: Ganti teks kodeblogger yang sudah ditandai, dengan Username akun Disqus yang kalian punya. Cek saja di Address Bar pada profil Disqus, itulah Username yang dimaksud.

Silakan tekan tombol Save Template untuk menyimpan perubahan Template Blogger yang baru saja dilakukan.

Sampai di sini, komentar Disqus sudah tampil di bawah postingan blog.

Cara Menyembunyikan Komentar Blogger / Blogspot

Jadi karena kalian telah memasang komentar Disqus di blog, widget komentar Blogger sebaiknya disembunyikan (bukan dihapus).

Login ke Blogger > Setelan > Postingan > Sembunyikan Komentar

Itu dia tutorial bagaimana caranya membuat akun Disqus dan cara memasang komentar Disqus di Blogger / Blogspot. Capek banget, ya? Hehe.

Artikel selanjutnya yang bisa kalian coba, masih berkaitan dengan artikel ini yaitu cara membuat komentar Disqus dengan Onclick Event - Mempercepat loading blog.*

Sumber: https://www.igniel.com/2018/09/plugin-komentar-disqus.html